如何使用 JSDom 对 Jest 中的自定义元素执行单元测试

Question

我知道有人在 number of occasions 上提出过这个问题，尽管自提出这些问题以来环境发生了变化：尤其是 JSDom now supports custom elements。

这些其他问题围绕着寻找替代品（例如使用Happy Dom），因为当时 JSDom 不支持自定义元素。不过既然 JSDom 确实支持自定义元素，那么有没有人有什么资料可以解决下面的错误呢？

TypeError: Class constructor HTMLElement cannot be invoked without 'new'

  1 | export default class Foo extends HTMLElement {
  2 |   constructor() {
> 3 |     super();
    |     ^
  4 | 
  5 |     this._clicker = 2;
  6 |   }

at new Foo (__tests__/fooclass.js:3:5)     
at Object.<anonymous> (__tests__/fooclass.test.js:7:13)

当前设置：

参考 repo 可用here（现已修复）：

自定义元素示例

class Foo extends HTMLElement {
  constructor() {
    super();

    this._clicker = 2;
  }

  connectedCallback() {
    this.textContent = 'My Foo Bar Element';
  }

  get testCallback() {
    return 'hello world!';
  }

  set clicker(num) {
    this._clicker = Number(num);
  }

  get clicker() {
    return this._clicker;
  }
}

packages.json

{
  "scripts": {
    "test": "jest --env=jest-environment-jsdom-sixteen"
  },
  "jest": {
    "verbose": true
  },
  "devDependencies": {
    "@babel/preset-env": "^7.8.4",
    "babel-plugin-transform-builtin-classes": "^0.6.1",
    "jest": "^25.1.0",
    "jest-environment-jsdom-sixteen": "^1.0.2"
  }
}

.babelrc

{
  "presets": ["@babel/preset-env"]
}

Answer 1

注意：截至May 2020，Jest 默认支持 JSDom 16.*，呈现以下不再需要或相关的内容

解决方案

Jest 默认使用 JSDom ^15.1.1 运行（截至 Feb 17th, 2020），因此您需要手动更新以使用 JSDom 16.2.0 安装 jest-environment-jsdom-sixteen。

首先，为Jest安装最新的JSDom环境

npm i jest-environment-jsdom-sixteen --save-dev

并将您的 package.json 更改为包括：

"scripts": {
  "test": "jest --env=jest-environment-jsdom-sixteen"
},

这将确保 Jest 运行正确的环境。

您还需要通过安装 babel-plugin-transform-builtin-classes 来确保 Babel 正确处理内置类（例如 class HTMLElement {}），如下所示：

npm i babel-plugin-transform-builtin-classes --save-dev

并将以下内容添加到您的.babelrc

"plugins": [
  ["babel-plugin-transform-builtin-classes", {
    "globals": ["Array", "Error", "HTMLElement"]
  }]
]

不要不要安装babel-plugin-transform-es2015-classes，因为这已经构成了Babel 7核心的一部分，根据this issue

工作简化的测试用例可用here。