Currently, I am working with Lit Element and Typescript for my project.
Here are the dependencies for my tests:
"@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"
This is how my web-test-runner.config.mjs configuration file looks like:
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))
})
]
};
My test code snippet:
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);
});
});
When executing the test using the wtr command, the tests run successfully. However, I noticed that the component is not being instantiated. This observation is supported by the fact that none of the console logs within the constructor and lifecycle hooks of the lit element are triggered. The test also fails with an error message
AssertionError: expected undefined to equal {}I suspect that the fixture function is merely placing the tags in the DOM without registering them as web components. It's unclear whether the test has access to the JavaScript code responsible for registering my Lit Element.
If you have any insights or guidance on this matter, please feel free to check out this related post on Stack Overflow.