[英]What is the correct setup to support es6 modules?
I have created an app with create-react-app
and added typescript.我用create-react-app
创建了一个应用程序并添加了 typescript。 After finishing app modules I wanted to do some unites test I have installed mocha and chai: npm install --save-dev mocha chai
.完成应用程序模块后,我想做一些单元测试,我安装了 mocha 和 chai: npm install --save-dev mocha chai
。
in my pakacge.json I have updated test script to "test": "mocha src/test/*"
.在我的 pakacge.json 中,我已将测试脚本更新为"test": "mocha src/test/*"
。 After using an import in my test file在我的测试文件中使用导入后
import {assert} from 'chai'
import {File} from "../components/File"
I run into an issue我遇到了一个问题
import {assert} from 'chai'
^^^^^^
SyntaxError: Cannot use import statement outside a module
I have searched a lot and tried a ton of answers like this one but still run into the same issue -_- And I am confused whether I need to install babel?我进行了很多搜索并尝试了很多类似这样的答案,但仍然遇到同样的问题-_-而且我很困惑是否需要安装 babel? Here is my package.json
any explanation这是我的package.json
任何解释
{
...
"dependencies": {
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.8.3",
"@types/classnames": "^2.2.11",
"@types/jest": "^26.0.22",
"@types/node": "^14.14.37",
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3",
"classnames": "^2.2.6",
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"typescript": "^4.2.3",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "cross-env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha src/test/*",
"eject": "react-scripts eject"
},
...
"devDependencies": {
"@types/chai": "^4.2.16",
"@types/mocha": "^8.2.2",
"chai": "^4.3.4",
"cross-env": "^7.0.3",
"mocha": "^8.3.2"
}
}
Here is my tsconfig.json
这是我的tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
How could I set up everything correctly?我怎样才能正确设置一切?
There is 02 options有02个选项
ts-mocha
the short way => npm install --save-dev ts-mocha
使用ts-mocha
的捷径 => npm install --save-dev ts-mocha
Mocha thin wrapper that allows running TypeScript tests with TypeScript runtime (ts-node) to get rid of compilation complexity. Mocha 瘦包装器,允许使用 TypeScript 运行时(ts-node)运行 TypeScript 测试,以摆脱编译复杂性。 All Mocha features are available without any limitation.所有 Mocha 功能都可以不受任何限制地使用。 See documentation .请参阅文档。
use this ts configuration for the test tsconfig.testing.json
.将此 ts 配置用于测试tsconfig.testing.json
。
{
"compilerOptions": {
"module": "commonjs",
"target": "es5"
},
"include": ["src/test/*"]
}
This a basic configuration you can update it according to your need这是一个基本配置,您可以根据需要对其进行更新
Add script to package.json
scripts: "test-ts": "ts-mocha -p tsconfig.testing.json src/test/*"
将脚本添加到package.json
脚本: "test-ts": "ts-mocha -p tsconfig.testing.json src/test/*"
Well you should pay attention for importing text files that may run into issues.那么您应该注意导入可能会遇到问题的文本文件。 it will lead to token errors so move them to another files and make sure your
utils
functoins to be pure functions since you run unit test.这将导致令牌错误,因此将它们移动到另一个文件并确保您的utils
函数是纯函数,因为您运行单元测试。
Another important note: You should set
"module": "commonjs"
to fix conflict issues, like yoursCannot use import statement outside a module
.另一个重要注意事项:您应该设置"module": "commonjs"
来解决冲突问题,例如您Cannot use import statement outside a module
。
mocha
with ts-node/register
for TypeScript execution.使用带有ts-node/register
的普通mocha
来执行 TypeScript。 Check the documentation检查文档ts-node
and cross-env
to use the new tsconfig.testing.json
.您应该安装ts-node
和cross-env
以使用新的tsconfig.testing.json
。tsconfig.testing.json
.这是tsconfig.testing.json
的简单配置。 Note you should add to the up configuration moduleResolution
to node
Check here for more details.请注意,您应该添加到 up 配置moduleResolution
to node
Check here了解更多详细信息。 Add the path to your declaration types if there is any to avoid errors of type error TS2304: Cannot find name "type_name"
.如果有任何声明类型的路径,请添加路径以避免类型error TS2304: Cannot find name "type_name"
。package.json
scripts: cross-env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha -r ts-node/register src/test/*
将脚本添加到package.json
脚本: cross-env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha -r ts-node/register src/test/*
{
"ts-node": {
"files": true
},
"compilerOptions": {
"target": "es5",
"module": "CommonJS",
"moduleResolution": "node"
},
"include": [
"src"
],
"exclude": [
"./node_modules/",
"./dist/"
],
"files": [
"path_to_your_types_declaration"
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.