javascript - 如何使用 jest/enzyme 测试 useEffect 与 useDispatch Hook 的结合？

Question

如何测试挂载时 useEffect 是否通过 requestMovies 调用 dispatch ？

import { useDispatch } from 'react-redux';

export const requestMovies = page => ({
  type: MoviesTypes.REQUEST_MOVIES,
  page,
});

const MoviesShowcaseList = () => {
  const { page } = useShallowEqualSelector(state => state.movies);
  const dispatch = useDispatch();

  const fetchNextMoviesPage = () => {
    dispatch(requestMovies(page + 1));
  };

  useEffect(fetchNextMoviesPage, []);

  return (...);
};

Answer 1

首先，我们使用jest.mock获得 useDispatch 模拟:

import { useDispatch, useShallowEqualSelector } from 'react-redux';

jest.mock('react-redux');

其次，我们使用 mount 渲染元素(shallow does not run useEffect 因为 React 自己的浅层渲染器不这样做)。

const wrapper = mount(<MoviesShowcaseList />);

如果使用现代版本的 enzyme ，我们不需要对 act() 做任何额外的事情，因为它是 already in Enzyme .

最后我们检查 useDispatch 是否已被调用:

expect(useDispatch).toHaveBeenCalledWith({
  type: MoviesTypes.REQUEST_MOVIES,
  0,
});

全部在一起(带有模拟useShallowEqualSelector):

import { useDispatch } from 'react-redux';

jest.mock('react-redux');

it('loads first page on init', () => {
  useShallowEqualSelector.mockReturnValueOnce(0); // if we have only one selector
  const wrapper = mount(<MoviesShowcaseList />);
  expect(useDispatch).toHaveBeenCalledTimes(1);
  expect(useDispatch).toHaveBeenCalledWith({
    type: MoviesTypes.REQUEST_MOVIES,
    0,
  });
});