'Jest test case for React hook component
When I write a react hook component which import '*.png' resource like this:
import React, { useState, useEffect } from 'react';
import './topMenu.less';
import intl from 'react-intl-universal';
import { Breadcrumb } from 'antd';
import home from '@/image/project/home.png';
const TopMenu: React.FC<{}> = () => {
const [page, setPage] = useState<string>('overview');
const [projectName, setProjectName] = useState<string>('');
useEffect(() => {
let hashUrl = window.location.hash;
let tempPage = hashUrl.split('/')[3];
let projectNameStr = sessionStorage.getItem('projectName');
setPage(tempPage);
setProjectName(projectNameStr ? projectNameStr : '');
}, []);
/**
* 功能描述 依据页面路由渲染面包屑组件的尾部文字
*
* @return {string} 面包屑的末级页面名称
*/
function getPageName(): string {
switch(page) {
case 'overview':
return intl.get('PROJECT_OVERVIEW');
case 'inference':
return intl.get('ROOT_CAUSE_INFERENCE');
case 'bigModel':
return intl.get('BIG_MODEL_DIAGNOSTICS');
default:
return intl.get('PROJECT_OVERVIEW');
}
}
return (<div className="slider-menu">
<Breadcrumb>
<Breadcrumb.Item href="#/kgom/packageList">
<img src={home} />
<span>{intl.get('PROJECT_LIST')}</span>
</Breadcrumb.Item>
<Breadcrumb.Item >
<span>{projectName}</span>
</Breadcrumb.Item>
<Breadcrumb.Item>
<span>{getPageName()}</span>
</Breadcrumb.Item>
</Breadcrumb>
</div>);
};
export default TopMenu;
then i write a easy test code like this:
import TopMenu from './topMenu';
import React from 'react';
import renderer from 'react-test-renderer';
jest.mock('@/image/project/home.png', () => '../image/project/home.png');
describe('TopMenu Test', () => {
it('render TopMenu', () => {
const component = renderer.create(<TopMenu />);
expect(component.toJSON()).toMatchSnapshot();
});
});
espicially this line: jest.mock('@/image/project/home.png', () => '../image/project/home.png'); I try many ways to rewrite this line, but it always error, when i not write this line, it calls that error: enter image description here
how do i write this hook component jest render test???
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|