To start with I am using Lit Element with Typescript.
My Test Dependencies:
"@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"
My web-test-runner.config.mjs config file:
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:
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 I run the test using wtr command, the tests do run. However, the component is not instantiated. I know this because none of the console logs that I put in constructor and lifecycle hooks of lit element is invoked. Also, the test fails with the message AssertionError: expected undefined to equal {} even though I am initializing the property with a default value.
I have a doubt that the fixture is simply putting the tags in the DOM and not registering it as web component. Not sure if the test even has access to JavaScript code that registers my Lit Element.
There is a related Stack Overflow post that talks about similar issue. Any help or direction is much appreciated.
