単純なコンポーネントがレンダリングされているかどうかをテストしたい(Jestをまだ調べているので)。アプリケーション自体は、ロゴを表示するためにwebpackで画像をロードします。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>