Para empezar, estoy usando Lit Element con Typescript.
Mis dependencias de prueba:
"@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" Mi archivo de configuración 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)) }) ] };Mi código de prueba:
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); }); }); Cuando ejecuto la prueba usando el comando wtr , las pruebas se ejecutan. Sin embargo, no se crea una instancia del componente. Lo sé porque no se invoca ninguno de los registros de la consola que puse en el constructor y los ganchos del ciclo de vida del elemento iluminado. Además, la prueba falla con el mensaje AssertionError: expected undefined to equal {} aunque estoy inicializando la propiedad con un valor predeterminado.
Tengo una duda de que el accesorio simplemente coloque las etiquetas en el DOM y no lo registre como componente web. No estoy seguro si la prueba incluso tiene acceso al código JavaScript que registra mi Lit Element.
Hay una publicación relacionada con Stack Overflow que habla de un problema similar. Cualquier ayuda o dirección es muy apreciada.