Jestjs 在StencilJS测试中使用jest dom会引发错误

Jestjs 在StencilJS测试中使用jest dom会引发错误,jestjs,stenciljs,jest-dom,Jestjs,Stenciljs,Jest Dom,我在StencilJS中有一个单元测试,其中我使用了来自的jest matcher。当我运行测试时,它会抛出一个错误: 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_modu

我在StencilJS中有一个单元测试,其中我使用了来自的jest matcher。当我运行测试时,它会抛出一个错误:

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);
  });
});
有趣的是,错误来自if语句的右侧(因为window.SVGElement是未定义的),但是我认为实际的问题是它不应该到达代码的这一部分。在if语句的左侧,对window.htmlElement的
htmlElement实例的检查返回为false,因为
htmlElement
属于
HTMLFormElement
类型,而
window.htmlElement
似乎是
MockHtmlElement


所以我的问题是——有没有办法让jest dom使用StencilJS单元测试,因为stencil设置的环境似乎不是jest dom所期望的?

在深入研究之后,我将回答我自己的问题,我认为答案是jest dom不会使用stencil


Jest的默认环境是jsdom,它使用jsdom在测试中创建类似浏览器的环境。然而,Stencil创建了Jest使用的自己的环境,包括自己的模拟DOM。这个模拟DOM实现还没有(目前)完全实现,因此使用jsdom编写的库,比如jest DOM和DOM测试库都失败了。

在深入研究之后,我将回答我自己的问题,我认为答案只是jest DOM不适用于模具

Jest的默认环境是jsdom,它使用jsdom在测试中创建类似浏览器的环境。然而,Stencil创建了Jest使用的自己的环境,包括自己的模拟DOM。这个模拟DOM实现的功能还不完全,所以用jsdom编写的库,比如jest DOM和DOM测试库都失败了

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);
  }
}