Testing >> Testing Package ||10

@open-wc/testing is an opinionated package that combines and configures testing libraries to minimize the amount of ceremony required when writing tests.

Setup

``bash
npm i -D @open-wc/testing@next
`

Testing helpers

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

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

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

Chai

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

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

`javascript
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(

);
expect(el).dom.to.equal('

Hey

');
});

it('can semantically compare lightDom trees', async () => {
const el = await fixture(

);
expect(el).lightDom.to.equal('

Hey

');
});

it('can compare against a snapshot', async () => {
const el = await fixture(

);
expect(el).dom.to.equalSnapshot();
});
});
`

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

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

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

chai-dom for dom testing:

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

describe('Plugin - chai-dom', () => {
it('can check for an exiting css class', async () => {
const el = await fixture(

);
expect(el).to.have.class('foo');
});
});
``