[英]Setup Jest + React testing library using NextJS in TypeScript — error setting upp jest.config.js
I am trying to set up Jest with a NextJS application, currently in jest.config.js
:我正在尝试使用 NextJS 应用程序设置 Jest,目前在
jest.config.js
中:
module.exports = {
testPathIgnorePatterns: ["<rootDir>/.next/", "node_modules/"],
setupFilesAfterEnv: ["<rootDir>/__tests__/setupTests.tsx"],
transform: {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
}
};
In my setupTests.tsx
I have:在我的
setupTests.tsx
我有:
import "@testing-library/jest-dom/extend-expect";
However when I run npm run test
I get the following error:但是,当我运行
npm run test
时,我收到以下错误:
Module identity-obj-proxy in the transform option was not found.
<rootDir> is: ....
If I remove the line in jest.config.js
I get:如果我删除
jest.config.js
中的行,我会得到:
Test suite failed to run
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".
globals.css:2
body {
^
SyntaxError: Unexpected token '{'
> 5 | import "../styles/globals.css";
What configuration should I use for the css
and scss
files? css
和scss
文件应该使用什么配置?
** EDIT ** ** 编辑 **
I made sure that identity-obj-proxy
is in my devDependencies however, now I get an error:我确保
identity-obj-proxy
在我的 devDependencies 中,但是现在我收到一个错误:
Test suite failed to run
Test suite failed to run
TypeError: Jest: a transform must export a `process` function.
> 5 | import "../styles/globals.css";
| ^
6 | import React from "react";
You need to install identity-obj-proxy.您需要安装 identity-obj-proxy。 Run >>> yarn add -D identity-obj-proxy
运行 >>> yarn add -D identity-obj-proxy
Try this:尝试这个:
style-mock.js
with this contentstyle-mock.js
module.exports = {};
moduleNameMapper
field of jest configmoduleNameMapper
字段中指定它moduleNameMapper: {
'^.+\\.(css|less)$': '<rootDir>/jest-config/style-mock.js'
}
With this setup, it will mock all css import, hope it helps通过此设置,它将模拟所有 css 导入,希望对您有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.