使用@ web /test-runner和@open-wc/test-帮助程序测试Lit元素(Lit)

Question

首先，我使用了Lit元素和打字记录。

我的测试依赖：

"@esm-bundle/chai": "^4.3.4-fix.0",
"@open-wc/chai-dom-equals": "^0.12.36",
"@open-wc/testing-helpers": "^2.1.2",
"@web/dev-server-esbuild": "^0.3.0",
"@web/test-runner": "^0.13.30",
"@web/test-runner-puppeteer": "^0.10.5",
"chai-a11y-axe": "^1.4.0",
"mocha": "^10.0.0"

我的web-test-runner.config.mjs配置文件：

import { esbuildPlugin } from '@web/dev-server-esbuild';
import { fileURLToPath } from 'url';

export default {
    files: ['src/**/*.test.ts'],
    nodeResolve: true,
    plugins: [
        esbuildPlugin({
            ts: true,
            tsconfig: fileURLToPath(new URL('./tsconfig.json', import.meta.url))
        })
    ]
};

我的测试代码：

import { CustomComponent } from './custom.component';
import { CustomData } from '../../../models/data.model';
import { fixture, fixtureCleanup, html } from '@open-wc/testing-helpers';
import { expect } from '@esm-bundle/chai';

describe('CustomComponent', () => {
    let component: CustomComponent;

    beforeEach(async () => {
        component = await fixture<CustomComponent>(html`<my-custom-component></my-custom-component>`);
    });

    afterEach(() => {
        fixtureCleanup();
    });

    it('should set the default data', () => {
        expect(component.customData).to.equal({} as CustomData);
    });
});

当我使用wtr命令运行测试时，测试就会运行。但是，组件没有实例化。我之所以知道这一点，是因为我放置在构造函数中的控制台日志和lit元素的生命周期挂钩都没有被调用。此外，即使我用默认值初始化属性，消息AssertionError: expected undefined to equal {}也会失败。

我怀疑这个工具只是简单地将标记放在DOM中，而不是将其注册为web组件。不确定测试是否能够访问注册我的Lit元素的JavaScript代码。

有一篇关于类似问题的related Stack Overflow帖子。任何帮助或指导都是非常感谢的。

Answer 1

有关您提到的相关问题，请参见my answer。

添加整个文件的导入，或者以某种方式使用组件的实例。