Использование jest-dom в тестах StencilJS вызывает ошибку

Question

У меня есть модульный тест в StencilJS, в котором я использую сопоставитель шуток от jest-dom. Когда я запускаю тест, он выдает ошибку:

TypeError: Right-hand side of 'instanceof' is not an object
      at checkHtmlElement (node_modules/@testing-library/jest-dom/dist/utils.js:61:69)
      at Object.toHaveFormValues (node_modules/@testing-library/jest-dom/dist/to-have-form-values.js:75:31)
      at __EXTERNAL_MATCHER_TRAP__ (node_modules/expect/build/index.js:342:30)
      at Object.throwingMatcher [as toHaveFormValues] (node_modules/expect/build/index.js:343:15)

Модульный тест:

import '@testing-library/jest-dom';
import { h } from '@stencil/core';
import { newSpecPage } from '@stencil/core/testing';
import { AgForm, FormRenderProps } from '../ag-form';
import {getByTestId} from "@testing-library/dom";

describe('ag-form', () => {
  it('sets initial string value', async () => {
    type TestFormValues = {
      stringValue: string;
    };

    const initialValues: TestFormValues = {
      stringValue: 'foo',
    };

    const page = await newSpecPage({
      components: [AgForm],
      template: () => (
        <ag-form
          initialValues={initialValues}
          renderer={(props: FormRenderProps<TestFormValues>) => {
            const { inputProps } = props;
            return (
              <form data-testid="test-form">
                <input {...inputProps('stringValue')} />
              </form>
            );
          }}
        />
      ),
    });

    const formElement = getByTestId(page.body, 'test-form')
    expect(formElement).toHaveFormValues(initialValues);
  });
});

Ошибка возникает из этой функции в jest-dom, которая проверяет, передается ли действительный HTMLElement в сопоставитель:

function checkHtmlElement(htmlElement, ...args) {
  checkHasWindow(htmlElement, ...args);
  const window = htmlElement.ownerDocument.defaultView;

  if (!(htmlElement instanceof window.HTMLElement) && !(htmlElement instanceof window.SVGElement)) {
    throw new HtmlElementTypeError(htmlElement, ...args);
  }
}

Что интересно, ошибка исходит из правой части оператора if (поскольку window.SVGElement не определен), однако я считаю, что реальная проблема заключается в том, что она не должна доходить до этой части кода. В левой части этого оператора if проверка htmlElement instanceof window.HTMLElement возвращается как ложное, как htmlElement относится к типу HTMLFormElement в то время как window.HTMLElement кажется MockHtmlElement.

Итак, мой вопрос: есть ли способ заставить jest-dom работать с модульными тестами StencilJS, поскольку кажется, что среда, которую устанавливает трафарет, не соответствует ожиданиям jest-dom?

Answer 1

Я собираюсь ответить на свой вопрос после того, как вникну в него еще немного, и думаю, ответ заключается в том, что шутка не будет работать со Stencil.

Средой Jest по умолчанию является jsdom, которую он использует для создания в тестах среды, подобной браузеру. Однако Stencil создает свою собственную среду, которую вместо этого использует Jest, включая собственный макет DOM. Эта фиктивная реализация DOM (пока) не является полнофункциональной, поэтому библиотеки, которые были написаны с учетом jsdom, такие как jest-dom и DOM-testing-library, не работают.