# Testing with sinon

Sinon is a library that lets you set up mocks, spies, and stubs in javascript. They ship an es-module version, so it's easy to use it in your tests:

Add Sinon as a dependency:

npm i -D sinon

Use it in your tests:

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

describe('my component', () => {
  it('calls myFunction when a button is clicked', () => {
    const el = fixture(html`
      <my-component></my-component>
    `);

    // stub a function
    const myFunctionStub = stub(el, 'myFunction');

    // click a button
    el.shadowRoot.getElementById('myButton').click();

    // check if the function was called
    expect(myFunctionStub).to.have.callCount(1);
  });
});
class MyComponent extends LitElement {
  myFunction(e) {
    console.log(e);
  }
  render() {
    return html`
      <button @click=${e => this.myFunction(e)}>click</button>
    `;
  }
}

customElements.define('my-component', MyComponent);

See the sinon documentation to learn how to use the different features.

If you run into any problems trying to stub methods on component, please check out the FAQ.

Last Updated: 3/17/2020, 2:42:14 PM