测试一个ES6类

Question

我正在学习用Jest测试我的JavaScript。我有一个基本的项目是这样设置的:

/
/src
myClass.js
/tests
myClass.test.js
package.json

代码如下:

myClass.js

export class MyClass {
constructor() {
this.result = null;
}
calculate() {
this.result = 1;
return this.result;
}
}

myClass.test.js

import { MyClass } from '../src/myClass';
test('Calculate', () => {
let myObject = new MyClass();
let result = myObject.calculate();
expect(result).toBe(1);
});

package.json

{
"name": "sample-project",
"version": "0.0.1",
"type":"module",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"test": "jest"
},
"dependencies": {
"vue": "^3.2.16",
"vue-router": "^4.0.11"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"jest": "^27.3.1",
"vite": "^2.6.4",
"vite-plugin-html": "^2.1.1",
"vite-plugin-singlefile": "^0.5.1"
}
}

当我使用npm run test运行测试时，它只执行jest，我收到一个错误，说:SyntaxError: Cannot use import statement outside a module.

我做错了什么?如何从Jest中测试MyClass?

Answer 1

请按照《笑话入门指南》中的Babel章节进行操作

简单地运行:

yarn add --dev babel-jest @babel/core @babel/preset-env

并在项目根目录下创建一个babel.config.js文件，内容如下:

// babel.config.js
module.exports = {
presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

供参考:Jest在底层使用虚拟Node环境。如果我没记错的话，支持的最老的Node版本是10。因此，如果您想要使用ES6的特性，就需要配置像Babel这样的源代码转换器。(源)