Как выполнять модульные тесты для пользовательских элементов в Jest с помощью JSDom

Я понимаю, что этот вопрос задавался несколько раз, хотя среда изменилась с тех пор, как были заданы эти вопросы: в частности, JSDom теперь поддерживает пользовательские элементы.

Эти другие вопросы касались поиска альтернатив (например, использования 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)

Текущая настройка:

Эталонное репо доступно здесь (теперь исправлено):

Пример нестандартного элемента

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"]
}

unit-testing jestjs jsdom babeljs custom-element
person Oliver    schedule 26.02.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

ПРИМЕЧАНИЕ. Начиная с мая 2020 г., Jest поддерживает JSDom 16. . * по умолчанию, что делает нижеприведенное более ненужным или актуальным

Решение

Jest работает с JSDom ^15.1.1 по умолчанию (с 17 февраля 2020 г. ), поэтому вам нужно будет выполнить обновление вручную, чтобы использовать JSDom 16.2.0 при установке jest-environment-jsdom-sixteen.

Сначала установите последнюю версию среды JSDom для Jest.

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

И измените свой package.json, включив в него:

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

Это гарантирует, что Jest работает в правильной среде.

Вам также необходимо убедиться, что Babel правильно обрабатывает встроенные классы (например, class HTMLElement {}), установив babel-plugin-transform-builtin-classes, например:

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, согласно эта проблема

Рабочий сокращенный тестовый пример доступен здесь.

person Oliver    schedule 26.02.2020
comment
Что касается Jest version 26, это больше не требуется: github.com/facebook/jest/blob/master/packages/ - person unitario; 08.10.2020
comment
Я запускаю jsdom 16+ и все еще получаю сообщение об ошибке в исходном вопросе. - person Sam152; 27.01.2021
comment
@ Sam152, возможно, стоит задать новый вопрос с минимальным воспроизведением, так как это может быть любое количество факторов, вызывающих проблему. Я бы рекомендовал поделиться соответствующими частями вашего package.json и вашей конфигурации babel (поскольку это может вызвать конфликты с Jest - в соответствии с исходным ответом) - person Oliver; 27.01.2021