使用 Jest 和 React 并导入 CSS 文件的 SyntaxError

小开

moduleNameMapper is the setting that tells Jest how to interpret files with different extension. You need to tell it how to handle Less files.

在项目中创建一个这样的文件(如果愿意，可以使用不同的名称或路径) :

`config/CSSStub.js`

module.exports = {};

这个存根是模块，我们将告诉 Jest 使用，而不是 CSS 或更少的文件。然后更改 moduleNameMapper设置并将此行添加到其对象中以使用它:

'^.+\\.(css|less)$': '<rootDir>/config/CSSStub.js'

现在 Jest 将把任何 CSS 或 Less 文件视为导出空对象的模块。您还可以执行其他操作ーー例如，如果使用 CSS 模块，则可以使用代理，以便每次导入都返回导入的属性名。

阅读更多向导。

小开

我通过在 package.json 文件的 jest 配置中使用 moduleNameMapper键来解决这个问题

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

After this you will need to create the two files as described below

__mocks__/styleMock.js

module.exports = {};

__mocks__/fileMock.js

module.exports = 'test-file-stub';

如果您正在使用 CSS 模块，那么最好模拟一个代理来启用 className 查找。因此你的配置会变成:

{
"jest":{
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
}
}

但是您需要安装 identity-obj-proxy包作为开发人员依赖项，即。

yarn add identity-obj-proxy -D

有关详细信息，请参阅开玩笑的

小开

从2018年2月开始更新使用 创建-反应-应用程序的用户。您不能在 package.json 中覆盖 moduleNameMapper，但是在 jest.config.js 中它可以工作，不幸的是，我没有找到任何关于它工作原因的文档。我的 < em > jest.config.js 是这样的:

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

它可以很好地跳过 scss 文件和@import。

支持我的答案，我跟随玩笑网络包

小开

类似的情况下，安装 Identity-object-agent 并将其添加到 CSS 的 jest 配置中是我的工作方式。

//jest.config.js


module.exports = {
moduleNameMapper: {
"\\.(css|sass)$": "identity-obj-proxy",
},
};

我看到的具体错误是:

Jest encountered an unexpected token


/Users/foo/projects/crepl/components/atoms/button/styles.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.button { }
^


SyntaxError: Unexpected token .


1 | import React from 'react';
> 2 | import styles from './styles.css';

小开

解决@import 意外令牌 = :)

Install package:

npm i --save-dev identity-obj-proxy

添加 jest.config.js

module.exports = {
"moduleNameMapper": {
"\\.(css|less|scss)$": "identity-obj-proxy"
}
}

小开

我在 package.json 的底部添加了 moduleNameMapper，我在其中配置了我的 jest，如下所示:

"jest": {
"verbose": true,
"moduleNameMapper": {
"\\.(scss|less)$": "<rootDir>/config/CSSStub.js"
}
}

小开

If you're using 开玩笑的, none of the solutions above will work! You'll need to mock transform.

Jest.config.js

module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
roots: [
"<rootDir>/src"
],
transform: {
".(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest-config/file-mock.js",
'.(css|less)$': '<rootDir>/jest-config/style-mock.js'
},
};

File-mock. js

module.exports = {
process() {
return `module.exports = 'test-file-stub'`;
},
};

style-mock.js

module.exports = {
process() {
return 'module.exports = {};';
}
};

我发现这个工作 example如果你想要更多的细节。

小开

更新: 2021年8月 If you are using Next JS with TypeScript. Simply follow the examples repo.

Else you will be wasting days configuring the environment.

Https://github.com/vercel/next.js/tree/canary/examples/with-jest