使用Jest測試時，使用webpack導入圖像時，酶渲染失敗

Question

我想測試一個簡單的組件是否渲染（因為我還在搞清楚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>

Answer 1

對於模擬圖像和其他靜態資產，它們實際上在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"
    }

Answer 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'; 

Answer 3

如果圖像是必需的，您可以模擬它，如：

import mockery from "mockery";

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

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

Answer 4

如果您正在使用package.json中的create-react-app和更改腳本部分來包含酶（這就是如何開始獲得相同的錯誤並且我得到了這個問題），您不需要這樣做，創建 - 反應-app已經包含了jest和酶，請參閱https://github.com/facebook/create-react-app/issues/2564