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

Question

我在StencilJS中进行了一个单元测试，其中我使用了来自jest-dom的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);
});
});

这个错误是从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的检查返回为false，因为htmlElement的类型是HTMLFormElement，而window.HTMLElement看起来是MockHtmlElement。

所以我的问题是，有没有一种方法可以让jest-dom与StencilJS单元测试一起工作，因为看起来steel设置的环境并不是jest-dom所期望的？

Answer 1

在深入研究之后，我将回答我自己的问题，我认为答案只是玩笑dom不适用于Stencil。

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