使用single-spa-react时,Jest失败,并显示(Could not parse CSS stylesheet...)

wlzqhblo  于 2023-04-18  发布在  Jest
关注(0)|答案(1)|浏览(251)

我正在使用single-spa-react创建一个微前端。我也安装了tailwindcss。所有工作正常。
为了添加单元测试,我使用了jest + react测试库。我有jest.config.js文件:

import type { Config } from 'jest';

const config: Config = {
    preset: 'ts-jest',
    testEnvironment: 'jsdom',
    collectCoverage: true,
    coverageReporters: ['text'],
    transform: {
        "^.+\\.js$": "babel-jest",
        "^.+\\.css$": ["jest-transform-css", { modules: true }]
    },
    moduleDirectories: ['node_modules', 'src'],
    testRegex: `(__tests__(.*)?(\\.)(spec))\\.(ts)x?$`,
};

export default config;

我使用yarn jest运行单元测试。结果很好,所有通过的测试都是绿色的,但是在cli中的测试覆盖率上面,我注意到下一个错误:

console.error
      Error: Could not parse CSS stylesheet
          at exports.createStylesheet ... ... ..

还呈现来自顺风的下一个数据:

'*/\n' +
          '\n' +
          '*,\n' +
          '::before,\n' +
          '::after {\n' +
          '  box-sizing: border-box; /* 1 */\n' +
          '  border-width: 0; /* 2 */\n' +
          '  border-style: solid; /* 2 */\n' +
          '  border-color: currentColor; /* 2 */\n' +
          '}\n' +
          '\n' +
          '::before,\n' +
          '::after {\n' +
          "  --tw-content: '';\n" +

为了能够摆脱上述错误,我在setupTests.js中添加了这个

const originalConsoleError = console.error;
console.error = function (message) {
  if (message.startsWith('Error: Could not parse CSS stylesheet')) return;
  originalConsoleError(message);
};

jestConfig.ts中添加以下行:setupFilesAfterEnv: ["<rootDir>/setupTests.js"], ...但没有成功。

问题:为什么我会遇到这些问题以及如何解决它们?

xvw2m8pv

xvw2m8pv1#

我想这和single-spa-react没有关系,这只是一个常见的jest css解析问题。
这个问题通常与jsdom以及它如何处理css有关。
通常的解决方案是模拟css文件,就像所有其他静态的一样,这对于测试目的来说是不紧急的。
根据jest文档https://jestjs.io/docs/webpack#mocking-css-modules,你可以使用moduleNameMapper:

"moduleNameMapper": {
  "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
  "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
}

然后在fileMock.js中,你可以导出一个空对象。
你也可以使用transform:

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

然后在fileTransformer.js文件中,您也可以只导出一个空对象。
另一种常见的解决方案是在Jest中使用identity-obj-proxyhttps://github.com/keyz/identity-obj-proxy来转换静态数据,仅用于测试。

module.exports = {
  moduleNameMapper: {
    '\\.(css|less)$': 'identity-obj-proxy',
  },
  transform: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/fileTransformer.js',
  },
};

相关问题