web-dev-qa-db-ja.com

Jest + Enzyme：画像srcをテストするには？

ロゴコンポーネントがあります。

import React from "react";
import logo from "assets/images/logo.png";

const Logo = () => {
  return <img style={{ width: 50 }} src={logo} alt="logo" />;
};

export default Logo;

テストファイル：

import React from "react";
import Logo from "components/shared/Logo";

describe("<Logo />", () => {
  it("renders an image", () => {
    const logo = shallow(<Logo />);

    expect(logo.find("img").prop("src")).toEqual("blahh");
  });
});

しかし、テストを実行すると、奇妙なエラーが発生します。

$ NODE_PATH=src jest
 FAIL  src/tests/Logo.test.js
  ● <Logo /> › renders an image

    TypeError: val.entries is not a function

      at printImmutableEntries (node_modules/expect/node_modules/pretty-format/build/plugins/immutable.js:44:5)
      at Object.<anonymous>.exports.serialize (node_modules/expect/node_modules/pretty-format/build/plugins/immutable.js:178:12)

画像src === "assets/images/logo.png"であることをどのようにテストするのですか？

reactjsjestjsenzyme
10
bigpotato

Logo componentsの近くの__test__ディレクトリ内にテストを書くと思います。

とにかく、テストファイルに対して相対的に「assets/images/logo.png」をインポートします。

プロジェクト構造がこのような場合

Project ├── assets │ └── images ├ | │ └── logo.png ├── src │ └── components ├ |── Logo.js │ └── __tests__ ├ |── logo.test.js └

最初に、次のように入力して、logo.test.jsに画像をインポートすることを述べました。

import React from 'react'; 
import {shallow} from 'enzyme';

import Logo from "./../Logo"; 
import logoImage from "./../../../assets/images/logo.png;

describe("<Logo />", () => {
    it("renders an image", () => {
        const logo = shallow(<Logo />);

        expect(logo.find("img").prop("src")).toEqual(logoImage);

     });
 });
11
thierno

何らかの理由で、この情報は明確に強調されていません。 'wepackとの統合' セクションでは、transformを使用して静的アセットを自動モックする方法が表示されます。

ModuleNameMapperが要件を満たすことができない場合、Jestの変換構成オプションを使用して、アセットの変換方法を指定できます。たとえば、ファイルのベース名を返すトランスフォーマー（require（ 'logo.jpg'）;が返す 'logo'など）は、次のように記述できます。

package.json

_{
  "jest": {
    "transform": {
      "\\.(js|jsx)$": "babel-jest",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
    }
  }
}
_

fileTransformer.js

_const path = require('path');

module.exports = {
  process(src, filename, config, options) {
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
  },
};
_

したがって、これによりwrapper.props().srcは単なる文字列になります（_.toEqual_などのあらゆる種類のマッチャーで使用可能）。また、expect(wrapper).toMatchSnapshot()は、画像パスを尊重するチャームのように機能することも意味します。

[upd] configでJS/JSXファイルに_"babel-jest"_変換を指定するのをお見逃しなく

1
skyboyer

このようなもの..

import React from "react";
import Logo from "components/shared/Logo";

describe("<Logo />", () => {
  it("renders an image with src correctly", () => {
    const wrapper= shallow(<Logo src="yourlogo.png" />);
    expect(wrapper.html()).toEqual('<img src="yourlogo.png"/>'); // implement your ".toEqual(...)" to your Logo component result 
  });
});

または、src propにアクセスするには：

const wrapper = mount(<Logo src="blah..."/>);
expect(wrapper.find({ prop: 'src' })).to.have.length(1); // or any other check you need

http://airbnb.io/enzyme/docs/api/ReactWrapper/find.html

0
toufek khoury