I am using angular 11, lit for web components and jest for unit testing with electron. The problem that I'm facing is that my lit elements' test cases are passing, but it's coverage remains 0 in jest coverage report. Here are my config files below.
jest.config.js
moduleNameMapper: {
'@core/(.*)': '<rootDir>/src/app/core/$1',
},
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
collectCoverageFrom: [
"<rootDir>/src/litelements/*.ts",
"<rootDir>/src/app/**/*.ts",
"!<rootDir>/src/app/app.module.ts",
"!<rootDir>/src/app/app-routing.module.ts",
"!**/node_modules/**",
"!**/vendor/**"
],
setupFiles: ['./dist/angular-lit/main.js'],
runner: 'jest-electron/runner',
testEnvironment: 'jest-electron/environment',
}
setup-jest.ts
import 'jest-preset-angular';
/* global mocks for jsdom */
const mock = () => {
let storage: { [key: string]: string } = {};
return {
getItem: (key: string) => (key in storage ? storage[key] : null),
setItem: (key: string, value: string) => (storage[key] = value || ''),
removeItem: (key: string) => delete storage[key],
clear: () => (storage = {}),
};
};
Object.defineProperty(window, 'localStorage', { value: mock() });
Object.defineProperty(window, 'sessionStorage', { value: mock() });
Object.defineProperty(window, 'getComputedStyle', {
value: () => ['-webkit-appearance'],
});
Object.defineProperty(document.body.style, 'transform', {
value: () => {
return {
enumerable: true,
configurable: true,
};
},
});
Here is my lit element and it's spec file
first-lit.ts (lit element)
import {LitElement, html, property, customElement} from 'lit-element';
@customElement('str-btn')
export class MyElement extends LitElement {
@property({ type: String })
innerTextValue = 'test text';
render() {
return html`
<div>Hello from MyElement!</div>
<div>${this.innerTextValue}</div>
`;
}
}
first-lit.spec.ts (lit element spec file)
import { MyElement } from './first-lit';
describe('lit-button', () => {
const FORM_BUTTON = 'str-form-btn';
let buttonElement: MyElement;
beforeEach(() => {
buttonElement = window.document.createElement(FORM_BUTTON) as MyElement;
document.body.appendChild(buttonElement);
});
afterEach(() => {
document.body.getElementsByTagName(FORM_BUTTON)[0].remove();
});
it('check set properties', () => {
// require('electron').remote.getCurrentWindow().show();
buttonElement.innerTextValue = 'test';
expect(buttonElement.innerTextValue).toBe('test');
});
});
This is the image of jest coverage report. The tests for lit element are passing but it's coverage is 0.
Sources I referred: https://www.ninkovic.dev/blog/2020/testing-web-components-with-jest-and-lit-element