@open-wc/testing

Testing

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

Part of Open Web Components: guides, tools and libraries for modern web development and web components

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');
  });
});