Package Exports

@open-wc/testing

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@open-wc/testing) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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