Reactjs Jest找不到样式名称

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

Update:如果我用

style={{{backgroundImage:`url（${myImg}}}}}

替换

style={{{backgroundImage:`url（test）`}}

则测试失败，因为

预期对象：{“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"
    ]
  }

const path = require('path');

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

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

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

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

我的React组件如下所示：

  "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"
    ]
  }

const path = require('path');

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

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

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

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

属性是否正确填充

---

有人对此有什么想法吗？提前谢谢。

真奇怪。尝试使用

--无缓存
选项运行测试。还要确保您的转换脚本实际正在运行（在那里执行
console.log
）。您的
transform
与
react scripts
使用的是相同的，所以我不确定，这看起来确实是正确设置的。这很奇怪。尝试使用
--无缓存
选项运行测试。还要确保您的转换脚本实际正在运行（在那里执行
console.log
）。您的
transform
与
react scripts
使用的相同，因此我不确定，这看起来好像设置正确。