如何使用 jest/enzyme 测试 useEffect 与 useDispatch 挂钩？

Posted 2023-02-22

【中文标题】如何使用 jest/enzyme 测试 useEffect 与 useDispatch 挂钩？

【英文标题】：How to test useEffect combined with useDispatch hooks using jest/enzyme?

【发布时间】：2020-01-11 12:07:51

【问题描述】：

我如何测试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 (...);
;

【参考方案1】：

首先，我们使用jest.mock 来模拟useDispatch：

import  useDispatch, useShallowEqualSelector  from 'react-redux';

jest.mock('react-redux');

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

const wrapper = mount(<MoviesShowcaseList />);

如果使用现代版本的酶，我们不需要对 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,
  );
);

【讨论】：

一旦你使用了钩子，我认为你真的不需要换成Provider。只需为其他钩子提供模拟值。至于错误，听起来react-redux（特别是useDispatch）没有被嘲笑，但这看起来很奇怪。能否提供你运行的全尺寸代码 sn-p？

useShallowEqualSelector 使用useSelector 所以我想我也需要模拟这个吗？抱歉，我对测试很陌生，您想要完整大小的测试/组件代码还是小型工作应用程序？

错过了那部分。是的，你也可以模拟useShallowEqualSelector（直到有很多选择器并且很难区分）。我附加了样本。

我看不出这个测试会如何通过。每次渲染都会调用 useDispatch，不带参数。我认为 Asaf 想测试是否使用正确的操作调用了 dispatch，而这不是这里要测试的。