Enzyme & React 路由器：如何使用 useHistorical 浅表渲染组件

Question

我一直在尝试的是使用shallow渲染组件，这是由enzyme提供的

。组件正在使用来自react-router-dom的useHistory。

const baseMatch: match<{ id: string }> = { /* path, url, params */};
const location = createLocation(baseMatch.url);
describe('MyComponent', () => {
const baseProps = {
history: createMemoryHistory(),
location: createLocation(baseMatch.url),
match: baseMatch
};
beforeEach(() => {
jest.mock('react-router-dom', () => ({
useHistory: jest.fn()
}));
});
afterEach(() => { jest.clearAllMocks() });
it('renders blah blah', () => {
const wrapper = shallow(<MyComponent {...baseProps} />);
// testing MyComponent here...
});

我参考了这篇文章，并以同样的方式jest.mock。

但是，这会导致TypeError: Cannot read property 'history' of undefined.

控制台说：

MyComponent › renders blah blah
TypeError: Cannot read property 'history' of undefined
24 | const MyComponent = (props: IProps) => {
25 |   console.log('useHistory', useHistory);
> 26 |   let history = useHistory();

奇怪的是，上面第 25 行中的console.log打印了useHistory的实现(换句话说，它不是未定义的(。

显然，useHistory没有被嘲笑。 我怀疑useHistory不能用shallow来嘲笑(在上面的帖子中，海报使用了mount()(。

但是，我不是 100% 确定，因为我无法从enzyme和react-router的文档中找到shallow是否与useHistory兼容。

是否可以将shallow与useHistory一起使用？任何建议将不胜感激。

Answer 1

从文档中：

注意：为了正确模拟，Jest 需要 jest.mock('moduleName'( 来 与 require/import 语句位于同一范围内。

因此，与其在beforeEach中嘲笑 react-router-dom - 不如尝试将其放在顶部范围：

jest.mock('react-router-dom', () => ({
useHistory: jest.fn()
}));
const baseMatch: match<{ id: string }> = { /* path, url, params */};
const location = createLocation(baseMatch.url);

describe('MyComponent', () => {
const baseProps = {
history: createMemoryHistory(),
location: createLocation(baseMatch.url),
match: baseMatch
};
...