@open-wc/testing

Testing

Part of Open Web Components

Open Web Components provides a set of defaults, recommendations and tools to help facilitate your web component project. Our recommendations include: developing, linting, testing, building, tooling, demoing, publishing and automating.

An opinionated package that combines and configures testing libraries to minimize the amount of ceremony required when writing tests.

Step by step guide

To help you get started with testing, we recommend reading this article for a great step by step guide.

Testing helpers

Exposes all functions of @open-wc/testing-helpers, so that you have a single package to import from:

import { fixture, html } from '@open-wc/testing';

describe('my-test', () => {
  it('works', async () => {
    const el = await fixture(html`
      <my-element></my-element>
    `);
  });
});

Chai

Exposes chai as an es module with useful plugins pre-configured:

@open-wc/semantic-dom-diff for dom tree / snapshot testing:

import { expect, fixture, html } from '@open-wc/testing';

describe('Plugin - semantic-dom-diff', () => {
  it('can semantically compare full dom trees', async () => {
    const el = await fixture(`<div><!-- comment --><h1>${'Hey'}  </h1>  </div>`);
    expect(el).dom.to.equal('<div><h1>Hey</h1></div>');
  });

  it('can semantically compare lightDom trees', async () => {
    const el = await fixture(`<div><!-- comment --><h1>${'Hey'}  </h1>  </div>`);
    expect(el).lightDom.to.equal('<h1>Hey</h1>');
  });

  it('can compare against a snapshot', async () => {
    const el = await fixture(`<div><!-- comment --><h1>${'Hey'}  </h1>  </div>`);
    expect(el).dom.to.equalSnapshot();
  });
});

@open-wc/chai-a11y-axe for a11y testing:

import { expect, fixture, html } from '@open-wc/testing';

describe('my-test', () => {
  it('works', async () => {
    const el = await fixture(html`
      <my-element></my-element>
    `);
    await expect(el).to.be.accessible();
  });
});

chai-dom for dom testing:

import { fixture, expect } from '@open-wc/testing';

describe('Plugin - chai-dom', () => {
  it('can check for an exiting css class', async () => {
    const el = await fixture(`<div class="foo bar"></div>`);
    expect(el).to.have.class('foo');
  });
});