反应 - 测试带开玩笑 - 类型错误：无法读取未定义的属性'destroy'

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钩子。我在写问题时意识到了这一点手掌