css - Jest 在打字稿中遇到了意外的标记
问题描述
我正在测试我的 React+TypeScript 组件,但是我收到了这个奇怪的消息,我尝试了所有方法但没有找到任何有用的资源,这是 TypeScript 错误还是其他什么,老实说,我在这里头晕,所以我遇到了一个问题:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/home/dr/code/npmpackage/darkmode/src/style.module.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.switch {
^
SyntaxError: Unexpected token '.'
1 | import * as React from 'react'
2 | // import 'learning-npm-package/dist/index.css'
> 3 | import classes from './style.module.css'
我目前在 React Project 中使用的包如下:
"peerDependencies": {
"react": "^16.0.0"
},
"devDependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/jest": "^25.1.4",
"@types/node": "^12.12.38",
"@types/react": "^16.9.27",
"@types/react-dom": "^16.9.7",
"@typescript-eslint/eslint-plugin": "^2.26.0",
"@typescript-eslint/parser": "^2.26.0",
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"enzyme-to-json": "^3.5.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"microbundle-crl": "^0.13.10",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.1",
"ts-jest": "^26.1.2",
"typescript": "^3.7.5"
},
"files": [
"dist"
],
"dependencies": {
"@types/enzyme": "^3.10.5",
"@types/enzyme-adapter-react-16": "^1.0.6",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"react-test-renderer": "^16.13.1"
}
./style.module.css:
.switch {
display: flex;
height: 36px;
position: relative;
width: 70px;
}
/** small */
.container {
height: 26px;
width: 50px;
}
任何帮助将不胜感激,谢谢!
解决方案
所以,我会在研究找到解决方案后自己回答。默认情况下 jest 不知道如何处理 CSS 文件,我们需要 CSS module mock for jest,为此,我们需要在 Webpack 和 Jest 之间建立一个桥梁,这就是如何moduleNameMapper
发挥桥梁作用的,我们只需要安装identity-obj-proxy
以创建一个模拟 CSS 模块,该模块返回预期的 CSS 类名,如<div className={classes.div}>
.
让我们安装代理:
yarn add identity-obj-proxy
// NPM
npm install identity-obj-proxy
在根/
目录 not上创建一个文件src
,命名jest.config.js
并放入以下代码:
module.exports ={
moduleNameMapper: {
"\\.css$": "identity-obj-proxy",
},
};
推荐阅读
- c# - 我怎么写这个,所以程序在用户输入他的名字后重新启动
- arrays - 在 Hive SQL 中分解列表以识别空白
- html - HTML CSS & Javascript 响应式导航栏
- solrj - 使用 Spring Data Solr 标记字段
- r - 我只能在 R 中安装软件包,只能从桌面打开 R
- java - 使用 Apache Commons CSV 从带有 Header 的 HashMap 列表中写入 CSV
- javascript - Protractor 的 getText() 方法不包括在 ::first-letter 伪选择器中完成的文本转换
- java - 使用 in.hasNextInt() 时,如何跳过同一行中的字符串?
- python - Microbit Python Neopixel RGBW
- r - 绘制三个值 x 轴