我想测试一个简单的组件是否渲染(因为我还在搞清楚Jest) . 应用程序本身使用webpack加载图像以显示徽标 .
当我尝试挂载/渲染/浅化无状态组件时,Jest会抛出错误 .
FAIL src/components/blog/blogList.spec.jsx
● Test suite failed to run
/home/requinard/Projects/manus-frontend/src/img/manus_logo.png: Unexpected character '�' (1:0)
> 1 | �PNG
| ^
2 |
3 |
4 | IHDR��G} pHYs.#.#x�?vtEXtSoftwareAdobe ImageReadyq�e<K�IDATx��] \�����=)DY
它似乎正试图加载图像而失败了 . 如何阻止Jest加载任何组件的图像,或者让它加载图像以便它仍然可以渲染 .
无状态组件:
import React from 'react';
PropTypes from 'prop-types';
import { BlogPostHeader } from './blogPostHeader';
import './blog.scss';
export const BlogList = props => (
<div className="blog-list">
{props.posts.map((post, key) => <BlogPostHeader post={post} key={key} className="blog-list-item" />)}
</div>
);
BlogList.propTypes = {
posts: PropTypes.array,
};
对无状态组件的测试
import React from 'react';
import { render } from 'enzyme';
import { BlogList } from './BlogList';
describe('<BlogList >', () => {
it('should render in enzyme', () => {
const wrapper = render(<BlogList />);
expect(wrapper).toBeTruthy();
});
});
渲染图像的组件(简化):
import logo from '../img/logo.png';'
<div className="logo-container"><img src={logo} className="logo-child" /> </div>
4 回答
如果您正在使用package.json中的create-react-app和更改脚本部分来包含酶(需要这样做,那么create-react-app已经包含了jest和酶,请参阅https://github.com/facebook/create-react-app/issues/2564
对于模拟图像和其他静态资产,它们实际上在wiki中有一个项目 .
https://facebook.github.io/jest/docs/webpack.html
我没有注意到
<rootDir>
被Jest本身取代,你必须自己包含它 .所以用文件结构
我必须在
package.json
中包含以下几行如果图像是必需的,您可以模拟它,如:
在此处查找更多信息https://www.npmjs.com/package/mockery
在@Samyn提到的内容中添加更多细节 . 您需要在package.json中包含此条目
你需要在配置中提到的mocks文件夹,与package.json在同一个文件夹中 . 在其中创建styleMock.js和fileMock.js文件 .