web-dev-qa-db-fra.com

Jest + Enzyme: Comment tester une image src?

J'ai un composant de logo:

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;

Fichier de test:

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

Mais quand je lance le test, il y a une erreur étrange:

$ 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)

Comment suis-je censé tester que l'image src === "assets/images/logo.png"?

reactjsjestjsenzyme
5
Edmund

Je suppose que vous écrivez vos tests dans un répertoire __test__ près de composants Logo.

Quoi qu'il en soit, importez votre "assets/images/logo.png" par rapport à votre fichier de test.

si votre structure de projet est comme ça 

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

Tout d'abord, comme je l'ai dit, importez une image dans votre logo.test.js en tapant: 

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);

     });
 });
6
thierno

Pour une raison quelconque, cette information n'est pas clairement mise en évidence. Dans 'Integration with wepack' section, il est montré comment créer automatiquement une synthèse d'actifs statiques avec transform:

Si moduleNameMapper ne peut pas répondre à vos exigences, vous pouvez utiliser l'option de configuration de la transformation de Jest pour spécifier le mode de transformation des actifs. Par exemple, un transformateur qui renvoie le nom de base d'un fichier (tel que require ('logo.jpg'); renvoie 'logo') peut être écrit ainsi:

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)) + ';';
  },
};

Donc, ceci ferait de votre wrapper.props().src une chaîne (disponible pour tous les types d’appariement comme .toEqual). Cela signifie également que expect(wrapper).toMatchSnapshot() fonctionne également comme un charme respectant le chemin de l'image.

[upd] ne manquez pas de spécifier la transformation "babel-jest" pour les fichiers JS/JSX dans la configuration

1
skyboyer

Quelque chose comme ça..

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 
  });
});

Ou, pour accéder à votre prop src: 

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