Miss any of our Open RFC calls?Watch the recordings here! »

@open-wc/testing

2.5.17 • Public • Published

permalink: 'testing/testing.html' title: Testing section: guides tags:

  • guides

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

CircleCI BrowserStack Status Renovate enabled

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

Keywords

Install

npm i @open-wc/[email protected]

Version

2.5.17

License

MIT

Unpacked Size

46.9 kB

Total Files

14

Last publish

Collaborators

  • avatar
  • avatar