如何测试挂载时 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 (...);
};
最佳答案
首先,我们使用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,
});
});
关于javascript - 如何使用 jest/enzyme 测试 useEffect 与 useDispatch Hook 的结合?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57858836/