如何使用转译器设置 Jest 以便我可以自动模拟 DOM 和画布？

编程问答 2022-05-27

问题描述

我有一个基于浏览器的小型游戏，我正在尝试启动并运行 Jest。

我的目标是能够编写测试，并让它们与 Jest 一起运行，并且没有任何额外的 DOM 或浏览器 API 相关的错误消息。

由于游戏使用了 DOM 和画布，我需要一个解决方案，我可以在其中手动模拟它们，或者让 Jest 为我处理。至少，我想验证“数据模型”和我的逻辑是否正常。

我也在使用 ES6 模块。

这是我迄今为止尝试过的：

  1. 尝试运行笑话：
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

  1. 我在根目录中创建了一个 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。我应该配置其他东西吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

babel-jestbabeljsdomhtml5-canvasjestjs