score:0

the problem is with mocking useselector. the function itself pass appstate to a callback, but a mock function is not aware of appstate. in this way your mock will return undefined. in this way books (list) will be undefined.

you need to specify what your mock will return, in this case an array. you can call mockreturnvalue passing a booksmock (an array) for that:

jest.mock("react-redux", () => ({
    useselector: jest.fn().mockreturnvalue(booksmock),
    usedispatch: () => mockdispatch
}));

score:0

you should mock the return value of useselector hook.

e.g.

gridcontainer.tsx:

import react, { useeffect } from 'react';
import { usedispatch, useselector } from 'react-redux';

import { getdata } from './actions/index';
import { appstate } from './store/store';
import griditem from './component/griditem';

function gridcontainer() {
  const dispatch = usedispatch();
  const books = useselector((state: appstate) => state);
  console.log('books:', books);

  useeffect(() => {
    dispatch(getdata());
  }, [dispatch]);

  const booklist = (list: appstate) => {
    return list.map((book) => <griditem key={book.id} data={book} />);
  };

  return <div classname="book-container">{booklist(books)}</div>;
}

export default gridcontainer;

./component/griditem.tsx:

import react from 'react';

export default function griditem({ data }) {
  return <div>{data.name}</div>;
}

./store/store.ts:

export type appstate = any[];

./actions/index.ts:

export function getdata() {
  return { type: 'get_data' };
}

gridcontainer.test.tsx:

import react from 'react';
import { shallow, mount } from 'enzyme';
import gridcontainer from './gridcontainer';
import { usedispatch, useselector } from 'react-redux';

const mockdispatch = jest.fn();
const booksmock = [
  { id: 1, name: 'golang' },
  { id: 2, name: 'typescript' },
];

jest.mock('react-redux', () => {
  return {
    useselector: jest.fn(() => booksmock),
    usedispatch: jest.fn(() => mockdispatch),
  };
});

describe('react hooks', () => {
  aftereach(() => {
    jest.clearallmocks();
  });

  it('renders container', () => {
    const wrapper = shallow(<gridcontainer />);
    const component = wrapper.find('.book-container');
    expect(component.length).tobe(1);
  });

  it('runs dispatch on mount', () => {
    const wrapper = mount(<gridcontainer />);
    expect(usedispatch).tobecalledtimes(1);
    expect(useselector).tobecalledwith(expect.any(function));
    expect(mockdispatch).tobecalledwith({ type: 'get_data' });
    expect(wrapper.find('.book-container').children()).tohavelength(2);
  });
});

unit test result:

 pass  examples/65172098/gridcontainer.test.tsx
  react hooks
    ✓ renders container (65 ms)
    ✓ runs dispatch on mount (44 ms)

  console.log
    books: [ { id: 1, name: 'golang' }, { id: 2, name: 'typescript' } ]

      at gridcontainer (examples/65172098/gridcontainer.tsx:11:11)

  console.log
    books: [ { id: 1, name: 'golang' }, { id: 2, name: 'typescript' } ]

      at gridcontainer (examples/65172098/gridcontainer.tsx:11:11)

--------------------|---------|----------|---------|---------|-------------------
file                | % stmts | % branch | % funcs | % lines | uncovered line #s 
--------------------|---------|----------|---------|---------|-------------------
all files           |      95 |      100 |   85.71 |     100 |                   
 65172098           |   93.33 |      100 |      80 |     100 |                   
  gridcontainer.tsx |   93.33 |      100 |      80 |     100 |                   
 65172098/actions   |     100 |      100 |     100 |     100 |                   
  index.ts          |     100 |      100 |     100 |     100 |                   
 65172098/component |     100 |      100 |     100 |     100 |                   
  griditem.tsx      |     100 |      100 |     100 |     100 |                   
--------------------|---------|----------|---------|---------|-------------------
test suites: 1 passed, 1 total
tests:       2 passed, 2 total
snapshots:   0 total
time:        5.442 s

source code: https://github.com/mrdulin/jest-v26-codelab/tree/main/examples/65172098


Related Query

More Query from same tag