mardi 27 octobre 2020

Testing custom react hook which returns an object with Testing library

I have the following custom hook code which I want to test-

const useAppContext = () => {
  const [display, setDisplay] = useState(false);
  const [data, setData] = useState({});

  const onClickHandler = ({ object }) => {
    setData(object);
    setDisplay(true);
  };

  return {
    appContext: {
      display,
      setDisplay,
      data,
      setData
    }
  };
};

I am trying to assert like this -

import { useAppContext } from '../AppContext';
import { renderHook } from '@testing-library/react-hooks';

describe('App Context', () => {
  it('App props', () => {
    const { result } = renderHook(() => useAppContext());
    // console.log(result.current). gives __NP__
    const expected = {
      display: false,
      data: {},
      setData: expect.any(Function),
      setDisplay: expect.any(Function)
    };
    expect(result.current).toStrictEqual(expected);
  });
});

But I am getting Received value as NP. If I try to directly return the properties, instead of wrapping them inside appContext, it works. If I return it like this, it works

return {
          display,
          setDisplay,
          data,
          setData
}

Please tell me how can I make assertions on the properties when they are wrapped within an object?

Aucun commentaire:

Enregistrer un commentaire