Jest로 테스트하는 동안 webpack으로 이미지를 가져올 때 효소 렌더링이 실패합니다.

간단한 구성 요소가 렌더링되는지 테스트하고 싶습니다. (여전히 Jest를 알아 냈으므로) 테스트하고 싶습니다. 응용 프로그램 자체는 webpack으로 이미지를로드하여 로고를 표시합니다.Jest로 테스트하는 동안 webpack으로 이미지를 가져올 때 효소 렌더링이 실패합니다.

stateless 구성 요소를 마운트/렌더링/축소하려고하면 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>

출처

2017-05-19 Samyn

더 많은 정보를 찾아, 그들은 실제로 위키의 항목이있다.

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" 
    }

에 다음 줄을 포함해야

출처

2017-05-19 10:39:53 Samyn

을 이미지가 당신, 필요한 경우 그것을 조롱 할 수있다 :

import mockery from "mockery"; 

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

이미지 및 기타 고정 자산을 조롱은 여기를 https://www.npmjs.com/package/mockery

출처

2017-05-19 10:30:15 punkbit

Jest로 테스트하는 동안 webpack으로 이미지를 가져올 때 효소 렌더링이 실패합니다.

답변

관련 문제