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>は冗談自体によって置き換えられますのでご注意していない、とあなたはそれを自分で含める必要があります。

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

画像が必要な場合は、それを模倣することができます：

import mockery from "mockery"; 

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

はここにからかっ画像やその他の静的な資産についてhttps://www.npmjs.com/package/mockery