Lit elements' code coverage appears 0 in spite of passing of test cases

322 Views Asked by At

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.

enter image description here

Sources I referred: https://www.ninkovic.dev/blog/2020/testing-web-components-with-jest-and-lit-element

0

There are 0 best solutions below