Question

为依赖大量挂钩的页面编写测试，而我对测试代码不是很熟悉。最重要的是，甚至没有更多的经验来模拟所涉及的钩子（useSelector，useEffect等）。该页面将从屏幕底部产生一个抽屉来选择选项。关闭抽屉后，我的测试失败，并显示错误“ TypeError：无法读取未定义的属性'destroy'”，并指向Material UI用来定义样式规则的makeStyles挂钩，但看起来确实像主题提供程序正在提供样式规则，所以我不确定这个问题。如果有人有见识，需要一些帮助。

import { Provider, useSelector } from 'react-redux';
import thunk from 'redux-thunk';
import configureStore from 'redux-mock-store';
import DisplayPage from './DisplayPage';

jest.mock('react-redux', () => ({
 ...jest.requireActual('react-redux'),
 useDispatch: () => jest.fn(),
 useSelector: jest.fn(),
}));
jest.mock('../../hooks', () => ({
 useDisplaySkuTracker: jest.fn(() => ({ isAvailable: [], notAvailable: [] })),
}));
describe('DisplayPage', () => {
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
 const initialState = {
 productsModule: {
 skuTracker: {
 sorting: '',
 searchBy: '',
 filter: false,
 },
 },
 };
 const store = mockStore(initialState);
 beforeEach(() => {
 useSelector.mockImplementation((callback) => {
 return callback(initialState);
 });
 });
 it('Drawer calls `onClose`', () => {
 const useState = jest.spyOn(React, 'useState');
 const useEffect = jest.spyOn(React, 'useEffect');
 const setDrawer = jest.fn();
 useState.mockImplementationOnce((f) => [f, setDrawer]).mockImplementationOnce((f) => [f, jest.fn()]);
 useEffect
 .mockImplementationOnce((f) => f())
 .mockImplementationOnce((f) => f())
 .mockImplementationOnce((f) => f());
 const wrapper = mount(
 <MuiThemeProvider theme={theme}>
 <Provider store={store}>
 <DisplayPage />
 </Provider>
 </MuiThemeProvider>,
 );
 const drawer = wrapper.find('h1').at(0);
 drawer.props.onClose();
 expect(setDrawer).toHaveBeenCalledTimes(1);
 });
});```

Answer 1

我只需要像其他钩子一样模拟makeStyles钩子。我在写问题时意识到。 facepalm

反应-测试/开玩笑-TypeError：无法读取未定义的属性“ destroy”

1 个答案: