我不明白为什么在呈现时我的模拟redux存储是空的。组件会呈现,但它对我需要测试的redux存储中的一个选定值有条件useEffect,但尽管我发送了它,但选定值总是空的。
下面是我的测试:
// Mock redux
jest.mock("react-redux", () => {
return {
...jest.requireActual("react-redux"),
useSelector: jest.fn(),
};
});
describe('Display', () => {
const mockState = {
value: "",
valueList: ["test-1", "test-2"]
};
const mockStore = configureStore();
const store = mockStore(mockState);
it('Renders deeply', () => {
render(
<Provider store={store}>
<Display/>
</Provider>
)
expect(screen.getByText("test-1")).toBeTruthy()
})
});
以下是组件:
function Display() {
const value = useSelector((state) => state.data.value)
const list = useSelector((state) => state.data.valueList)
const [rows, setRows] = useState([])
useEffect(() => {
const temp = []
list.forEach((item) => {
......
})
setRows(temp)
}, [list])
return (
<Container>
{ !value &&
<Container >
<p>Placeholder</p>
{ !rows.length ? .... :
<div>.....</div>
}
</Container>
}
</Container>
)
}
然而,尽管如此,当测试在组件中运行时valueList总是空的,有人知道这是为什么吗?
1条答案
按热度按时间1tuwyuhd1#
1.不要部分模拟
useSelector
,甚至是react-redux
包,你的模拟实现会破坏第三方包的功能。1.如果您使用
redux-mock-store
包来创建模拟存储,那么您没有提供正确的state
。例如
index.jsx
index.test.jsx
:试验结果: