Overwriting jest.mock for react-router-dom and useHistory ho

Question

我有一个使用useHistory钩子的组件。

当我编写单元测试时，我模拟了react-route-dom模块，以便在正在测试的组件中正确模拟useHistory钩子。

jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useHistory: () => ({
location: {
pathname: 'home',
},
}),
}));

但是，在其中一个测试(名为testB(中，我想覆盖location.pathname，以便pathname与默认模拟值的值(help(不同。

jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useHistory: () => ({
location: {
pathname: '/home',
},
}),
}));
describe('testing ComponentA', () => {
afterEach(() => {
jest.clearAllMocks();
});
it('test A', () => {
// some test
});
it('test B', () => {
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useHistory: () => ({
location: {
pathname: '/help',
},
}),
}));
// expect ...
});
it('test C', () => {
// some test
});
});

但是，这似乎没有按预期工作，因为内部模拟似乎没有覆盖顶级模拟。我可以知道如何做到这一点吗？我已经搜索了其他类似的线程，但它们的效果不佳。

Answer 1

我设法通过在__mocks__文件夹中模拟react-router-dom库来存档类似的东西，然后在我需要用mockReturnValue覆盖它的返回值的每个测试中单独模拟钩子。

// /__mocks__/react-router-dom.js
module.exports = {
...jest.requireActual('react-router-dom'),
useLocation: jest.fn(), // --> you may use useHistory instead
};

it('Should ...', () => {
// Here mock what you want to test
useLocation.mockReturnValue({
search:"?foo=bar",
});
...
});

在您的情况下，使用useHistory应该是这样的

it('Should ...', () => {
// Here mock what you want to test
useHistory.mockReturnValue({
location: {
pathname: '/home',
},
});
...
});

我很想知道是否有人有更好的方法。