Как выполнить модульные тесты для пользовательских элементов в Jest с использованием JSDom - PullRequest
Новая
       18

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

2 голосов
/ 26 февраля 2020

Я понимаю, что этот вопрос задавался число раз , хотя среда изменилась с тех пор, как были заданы эти вопросы: в частности, 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;
  }
}

пакетов. 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"
  }
}

.babelr c 

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

1 Ответ

1 голос
/ 26 февраля 2020

Решение

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

Do not install babel-plugin-transform-es2015-classes, поскольку это уже является частью ядра Babel 7, согласно этой проблеме

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

...