Reactjs 测试react redux使用选择器
我有一个react应用程序,它使用react redux、useSelector从存储中获取数据。 反应组分有Reactjs 测试react redux使用选择器,reactjs,unit-testing,react-redux,react-hooks,Reactjs,Unit Testing,React Redux,React Hooks,我有一个react应用程序,它使用react redux、useSelector从存储中获取数据。 反应组分有 function PersonDataView() { const name= useSelector(state => state.data.name) const dob= useSelector(state => state.data.dob) const dispatch = useDispatch() const show= () => di
function PersonDataView() {
const name= useSelector(state => state.data.name)
const dob= useSelector(state => state.data.dob)
const dispatch = useDispatch()
const show= () => dispatch({type: 'SHOW'})
const remove= () => dispatch({type: 'REMOVE'})
return (
<div>
<h2>Person Details</h2>
<div>
<button onClick={show}>Show</button>
<span aria-label="name">{name}</span>
<span aria-label="dob">{dob}</span>
<button onClick={remove}>Remove</button>
</div>
</div>
)
}
但是使用jest模拟的问题是,在多个选择器的情况下,所有useSelectors都将返回相同的模拟值。
使用jest的模拟方式,jest.fn().mockReturnValueOnce()在我看来并不正确 试试这个:
jest.mock('react-router');
const useSelectorMock = useSelector as any;
describe('something', () {
test('name', () => {
// Use this for each useSelector call:
useSelectorMock.mockImplementationOnce(jest.fn(() => returnValue as yourType));
}
}
我建议采用不同的方法-将选择器提取到单独的文件中,例如file selectors.js:
const nameSelector = state => state.data.name;
const dobSelector = state => state.data.dob;
然后在测试中,您可以模拟useSelector,如下所示:
jest.mock('react-redux', () => ({
useSelector: jest.fn().mockImplementation(selector => selector()),
}));
和模拟选择器,例如:
jest.mock('./selectors.js', () => ({
nameSelector: jest.fn().mockReturnValue("myTestName"),
dobSelector: jest.fn().mockReturnValue("myTestDob"),
}));
尝试以下方法:
jest.mock('react-redux', () => ({
useSelector: jest.fn().mockImplementation(func => func(store))
});
还应在此处添加一个图层:
jest.mock('react-redux', () => {
const store = {
data: {
name: {
...
},
dob: {
...
}
}
};
jest.mock('react-redux', () => {
const store = {
data: {
name: {
...
},
dob: {
...
}
}
};