Question

我有一个React + Typescript + Webpack（使用CSS模块）项目，我正在尝试编写单元测试。在我的单元测试中，我的单元测试失败了，因为样式似乎未定义。

更新：如果我将style={{backgroundImage: `url(${myImg})`}}替换为style={{backgroundImage: `url(test)`}}，那么测试将失败并显示Expected object: {"backgroundImage": "url(test)"}，因此问题必须与导入图像的方式有关正在我的测试中发生。

在package.json中，我的jest对象如下所示：

  "jest": {
    "moduleNameMapper": {
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "transform": {
      "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileMock.js"
    },
    "testRegex": "\\.(test|spec)\\.tsx?$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json"
    ]
  }

fileMock.js看起来像这样：

const path = require('path');

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

My React组件如下所示：

import * as styles from './Foo.less';
import myImg from './myImg.png';

export const Foo = () => (
  <div
    className="something"
    style={{backgroundImage: `url(${myImg})`}}
  >
  Some content
  </div>
);

我想测试样式道具包含myImg.png。我的测试看起来像这样：

import * as React from 'react';
import { shallow } from 'enzyme';
import { Foo } from './Foo';

test('Foo has myImg in style prop', () => {
  const wrapper = shallow(
    <Foo />
  );
  expect(wrapper.find('.something').prop('style')).toContain('myImg.png');
});

我希望此测试通过，但是，它失败并出现以下错误：

expect(object).toContain(value)

Expected object:
  {"backgroundImage": "url(undefined)"}
To contain value:
  "myImg.png"

我不太清楚这里发生了什么。当我在浏览器中运行应用程序时，图像显示正常，我可以检查元素并看到backgroundImage属性正在正确填充。

有没有人对此有任何想法？提前谢谢。

Jest无法找到样式名称

0 个答案: