Jest Enzyme：如何测试图像 src？

Question

我有一个徽标组件：

 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”？

原文由 bigpotato 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我假设您在 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);

     });
 });

原文由 thierno 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

由于某种原因，此信息未明确突出显示。在 “与 wepack 集成” 部分中，它显示了如何使用 transform 自动模拟静态资产：

如果 moduleNameMapper 不能满足您的要求，您可以使用 Jest 的转换配置选项来指定资产如何转换。例如，返回文件基本名称的转换器（例如 require(‘logo.jpg’); 返回 ‘logo’）可以写成：

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

文件转换器.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() 也像尊重图像路径的魅力一样工作。

[更新] 不要错过指定 "babel-jest" 配置中 JS/JSX 文件的转换

原文由 skyboyer 发布，翻译遵循 CC BY-SA 4.0 许可协议