我有一个CRA和Typescript（.tsx）应用程序。我正在尝试为需要的组件编写测试useHistory，useRouteMatch但它返回错误：TypeError: Cannot read property 'history' of undefined。
组件：
const SidebarTreeNav: React.FC<Props> = ( { tree, expanded } ) => {
const history = useHistory();
let { url } = useRouteMatch();
const handleClick = useCallback(
( path: string ) => history.push(`${ url }/${ path }`),
[ history ]);
return (
<SidebarTreeNavView expanded={ expanded ?? [ '0' ] }>
<SidebarTreeNavBlock handleClick={ handleClick } tree={ tree } node={ 0 } />
</SidebarTreeNavView>
);
};
export default SidebarTreeNav;
考试：
beforeEach(() => {
jest.mock('react-router-dom', () => {
const originalModule = jest.requireActual('react-router-dom');
return {
__esModule: true,
...originalModule,
useRouteMatch: { url: '/entry' },
useHistory: jest.fn(),
};
});
shallow = createShallow();
wrapper = shallow(<SidebarTreeNav tree={ [] } />);
});
it('<SidebarTreeNav /> should be defined', () => {
expect(wrapper).toBeDefined();
});
可能您不再需要此答案，但我会将其发布以供将来参考。
首先，您jest.mock在错误的位置定义了它，它必须是静态的，而不是在每次安装组件之前都进行模拟-这可以解决您的useHistory错误。其次，您useRouteMatch以错误的方式嘲笑了它，这将抛出useRouteMatch不是函数的错误。第三，为什么需要它__esModule: true？
无论如何，这是我的工作解决方案（我删除了一些不相关的部分）：
SidebarTreeNav组件：
import React, { useCallback } from 'react';
import { useHistory, useRouteMatch } from 'react-router-dom';
const SidebarTreeNav = () => {
const history = useHistory();
const { url } = useRouteMatch();
const handleClick = useCallback(
(path: string) => history.push(`${url}/${path}`),
[history]
);
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
return <div onClick={() => handleClick(url)}>expanded</div>;
};
export default SidebarTreeNav;
测试文件：
import { shallow, ShallowWrapper } from 'enzyme';
import React from 'react';
import SidebarTreeNav from './SideBarTreeNav';
jest.mock('react-router-dom', () => {
const originalModule = jest.requireActual('react-router-dom');
return {
...originalModule,
useHistory: jest.fn(),
useRouteMatch: jest.fn(() => {
return { url: '/entry' };
}),
};
});
describe('whatever', () => {
let wrapper: ShallowWrapper;
beforeEach(() => {
wrapper = shallow(<Temporary />);
});
it('<SidebarTreeNav /> should be defined', () => {
expect(wrapper).toBeDefined();
});
});
旁注：使用示例确实很困难，因为您只发布了部分代码，下次请添加完全复制的js小提琴。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句