使用 Jest 进行测试时使用 webpack 导入图像时酶渲染失败答案

【问题标题】：Enzyme render fails when importing image with webpack while testing with Jest使用 Jest 进行测试时使用 webpack 导入图像时酶渲染失败
【发布时间】：2017-10-19 10:27:27
【问题描述】：

我想测试一个简单的组件是否呈现（因为我还在搞清楚 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>

【问题讨论】：

标签： javascript reactjs webpack jestjs enzyme

【解决方案1】：

如果您使用 create-react-app 并更改 package.json 中的脚本部分以包含酶（这就是如何开始得到相同的错误，我遇到了这个问题），您不需要这样做， create-react-app 已经包含 jest 和酵素，见https://github.com/facebook/create-react-app/issues/2564

【讨论】：

【解决方案2】：

为@Samyn 提到的内容添加更多细节。你需要在你的 package.json 中有这个条目

  "jest": {
    "modulePaths": [
      "__mocks__"
    ],
    "moduleNameMapper":  {
      "\\.(css|sass|scss)$": "styleMock.js",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "fileMock.js"
    },
    "testPathIgnorePatterns": [
      "/node_modules/",
      "/build/"
    ]
  }

您需要将配置中提到的 mocks 文件夹与此 package.json 放在同一文件夹中。在其中创建 styleMock.js 和 fileMock.js 文件。

/* styleMock.js contents */
module.exports = {}

/* fileMock.js contents */
module.exports = 'test-file-stub';

【讨论】：

【解决方案3】：

对于模拟图像和其他静态资产，它们实际上在 wiki 中有一个项目。

https://facebook.github.io/jest/docs/webpack.html

我没有注意到 <rootDir> 被 Jest 本身取代，您必须自己包含它。

所以文件结构为

config \
  jest \
    fileMock.js
    styleMock.js
src |
package.json

我必须在package.json 中包含以下几行

"moduleNameMapper": {
      "\\.(css|scss|less)$": "<rootDir>/config/jest/styleMock.js",
      "\\.(png|jpg|gif|ttf|eot|svg)$": "<rootDir>/config/jest/fileMock.js"
    }

【讨论】：

【解决方案4】：

如果需要图片，你可以模拟它，比如：

import mockery from "mockery";

mockery.enable();
mockery.registerMock('../img/logo.png', 0)

在此处查找更多信息https://www.npmjs.com/package/mockery

【讨论】：