【发布时间】：2021-02-03 18:38:07
【问题描述】：
我有一个基于浏览器的小型游戏，我正在尝试启动并运行 Jest。
我的目标是能够编写测试，并让它们与 Jest 一起运行，并且不会有任何额外的 DOM 或浏览器 API 相关的错误消息。
由于游戏使用 DOM 和画布，我需要一个解决方案，我可以手动模拟它们，或者让 Jest 为我处理。至少，我想验证“数据模型”和我的逻辑是否合理。
我也在使用 ES6 模块。
这是我迄今为止尝试过的：
- 试运行玩笑：
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".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• 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/dingo/code/game-sscce/game.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { Game } from './game';
^^^^^^
SyntaxError: Cannot use import statement outside a module
我在这里了解到，我可以实验性地启用 ES 模块支持，或者使用转译器输出 Jest 可以识别和运行的 ES5。
所以我的选择是：
- 启用实验性 ES 模块支持
- 使用 Babel 进行转译
- 使用 Parcel 进行转译
- 使用 Webpack 进行转译
我决定尝试 Babel 并在这里查看说明：https://jestjs.io/docs/en/getting-started#using-babel
- 我在根目录下创建了一个 babel.config.js 文件。
安装 babel 并创建配置文件后，这是一个 SSCCE：
babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env'
]
],
};
game.js
export class Game {
constructor() {
document.getElementById('gameCanvas').width = 600;
}
}
new Game();
game.spec.js
import { Game } from './game';
test('instantiates Game', () => {
expect(new Game()).toBeDefined();
});
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="module" src="game.js" defer></script>
</head>
<body>
<div id="gameContainer">
<canvas id="gameCanvas" />
</div>
</body>
</html>
package.json
{
"name": "game-sscce",
"version": "1.0.0",
"scripts": {
"test": "jest"
},
"devDependencies": {
"@babel/core": "^7.12.13",
"@babel/preset-env": "^7.12.13",
"babel-jest": "^26.6.3",
"jest": "^26.6.3"
}
}
现在当我再次尝试运行 Jest 时，我得到：
FAIL ./game.spec.js
● Test suite failed to run
TypeError: Cannot set property 'width' of null
1 | export class Game {
2 | constructor() {
> 3 | document.getElementById('gameCanvas').width = 600;
| ^
4 | }
5 | }
6 |
at new Game (game.js:3:5)
at Object.<anonymous> (game.js:7:1)
at Object.<anonymous> (game.spec.js:1:1)
...现在，我不知道该怎么办。如果文档没有被识别，那么我怀疑 Jest 没有正确使用 jsdom。我应该配置其他东西吗？
【问题讨论】：
标签： dom jestjs html5-canvas babeljs babel-jest