如何使用玩笑/酶测试 useEffect 与 useDispatch 挂钩？

Question

如何测试是否useEffect叫dispatch与requestMovies上安装？

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 不运行，useEffect因为 React 自己的浅层渲染器不这样做)渲染我们的元素。

const wrapper = mount(<MoviesShowcaseList />);

如果使用现代版本的酶，我们不需要做任何额外的事情，act()因为它已经在 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,
  });
});