我正在使用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"],
...但没有成功。
问题:为什么我会遇到这些问题以及如何解决它们?
1条答案
按热度按时间xvw2m8pv1#
我想这和
single-spa-react
没有关系,这只是一个常见的jest css解析问题。这个问题通常与
jsdom
以及它如何处理css有关。通常的解决方案是模拟css文件,就像所有其他静态的一样,这对于测试目的来说是不紧急的。
根据jest文档https://jestjs.io/docs/webpack#mocking-css-modules,你可以使用moduleNameMapper:
然后在fileMock.js中,你可以导出一个空对象。
你也可以使用transform:
然后在fileTransformer.js文件中,您也可以只导出一个空对象。
另一种常见的解决方案是在Jest中使用
identity-obj-proxy
https://github.com/keyz/identity-obj-proxy来转换静态数据,仅用于测试。