要正确模拟useSelector
钩子以在测试时返回正确的值,可以采取以下步骤:
redux-mock-store
库来创建一个虚拟的store对象。useSelector
钩子,并使用jest.mock
来模拟它。这样可以确保在测试时返回我们期望的值。redux-mock-store
库中的getState
函数来获取模拟store中的状态,并将其作为useSelector
的模拟返回值。useSelector
钩子时返回了正确的值。以下是一个示例代码:
import { renderHook } from '@testing-library/react-hooks';
import configureMockStore from 'redux-mock-store';
import { useSelector } from 'react-redux';
const mockStore = configureMockStore();
const initialState = { /* 初始状态 */ };
const store = mockStore(initialState);
jest.mock('react-redux', () => ({
useSelector: jest.fn(),
}));
test('测试组件', () => {
const expectedValue = '预期的值';
useSelector.mockImplementation(callback => callback(store.getState()));
const { result } = renderHook(() => yourCustomHook()); // 替换为你要测试的自定义hook
const actualValue = result.current;
expect(actualValue).toBe(expectedValue);
});
需要注意的是,上述示例代码中的yourCustomHook
是你要测试的自定义hook,需要将其替换为实际的自定义hook。
这种方法可以正确模拟useSelector
钩子,并在测试时返回预期的值,从而保证了测试的准确性。
领取专属 10元无门槛券
手把手带您无忧上云