Testing

Testing ensures your code functions as you intend and saves you from tedious debugging.

See the Starter Kits documentation for an easy to use setup with a fully pre-configured testing environment that works great for testing Lit components.

Lit is a standard modern Javascript library, and you can use virtually any Javascript testing framework to test your Lit code. There are many popular options, including Jest, Karma, Mocha, Jasmine, and Web Test Runner.

There are a few things you'll want to make sure your testing environment supports to effectively test your Lit code.

Lit components are designed to run in the browser so testing should be conducted in a browser environment. Tools specifically focusing on testing node code may not be a good fit.

The test environment you use must have support for using modern Javascript, including using modules with bare module specifiers, or else down-leveling modern Javascript appropriately. See the Requirements for legacy browsers documentation for more details.

To test on older browsers, your test environment will need to load some polyfills, including the web components polyfills and Lit's polyfill-support module. See the Polyfills documentation for more details.

We recommend using Web Test Runner since it is specifically designed to test modern web libraries like Lit using modern web features like custom elements and shadow DOM. See the Getting Started documentation for Web Test Runner.

In order to support older browsers, you need to configure Web Test Runner as follows:

Install @web/dev-server-legacy:

npm i @web/dev-server-legacy --save-dev

Setup web-test-runner.config.js:

import { legacyPlugin } from '@web/dev-server-legacy';

export default {
  /* ... */
  plugins: [
    // make sure this plugin is always last
    legacyPlugin({
      polyfills: {
        webcomponents: true,
        // Inject lit's polyfill-support module into test files, which is required
        // for interfacing with the webcomponents polyfills
        custom: [
          {
            name: 'lit-polyfill-support',
            path: 'node_modules/lit/polyfill-support.js',
            test: "!('attachShadow' in Element.prototype)",
            module: false,
          },
        ],
      },
    }),
  ],
};

Edit this page