如何测试动作已经分派在预渲染页上的下一个js

Question

我正在尝试测试一个动作已经在getServerSiderProps函数内调度。

我正在使用next + react + Redux

测试失败，声称timesActionDispatched等于0而不是1

我如何修复测试?

我手动测试了页面，一切正常，所以测试中的问题是100% +当操作在客户端被调度时，测试是成功的。

Answer 1

感谢juliomalves提供的解决方案

测试

jest.mock('../../../redux/actions/recipe', () => ({ 
loadRecipeListAction: jest.fn() 
}));
test('should dispatch loadRecipeListAction', async () => {
const listOfRecipes = (await getStaticProps()).props.listOfRecipes;
render(
<Provider store={store}>. 
<RecipeList listOfRecipes={listOfRecipes} />
</Provider>
);
const timesActionDispatched = loadRecipeListAction.mock.calls.length;
expect(timesActionDispatched).toBe(1);
});

页面

import DisplayRecipes from '../../components/recipes/DisplayRecipes';
import React from 'react';
import { loadRecipeListAction } from '../../redux/actions/recipe';
import { store } from '../../redux/store';
const RecipeList = ({ listOfRecipes }) => {
return (
<main data-testid='recipeList'>
{listOfRecipes ? <DisplayRecipes recipesToDisplay={listOfRecipes} /> : null}
</main>
);
};
export async function getStaticProps() {
await store.dispatch(loadRecipeListAction());
const { listOfRecipes } = await store.getState().recipeReducer;
return { props: { listOfRecipes }, revalidate: 10 };
}
export default RecipeList;