@instructure/ui-testbed

category: packages

@instructure/ui-testbed

Creates a sandbox and provides utilities for testing UI code.

Installation

yarn add --dev @instructure/ui-testbed

Usage

Tests using the ui-testbed are written using the mocha testing framework and chai bdd style assertions.

The Testbed handles all of the common setup and teardown for your test.

It also provides some utilities for rendering components, updating props and stubbing out functions.

To set up the test bed:

const testbed = new Testbed(<MyComponent prop="foo" />)

To render the component under test:

const subject = testbed.render()

The render function returns the component under test wrapped in a enzyme object that you can use to query the DOM and/or the component tree rendered by your component. See the enzyme and chai documentation for more details on how to write assertions.

To update the props after render:

subject.setProps({
  someProp: 'someNewValue'
}, () => {
  // assert something after props have been updated
  done()
})

To stub out a function:

const onClick = testbed.stub()

const subject = testbed.render({
  onClick
})

subject.find('input').simulate('click')

expect(onClick).to.have.been.called()

The testbed provides a reference to a sinon sandbox that you can use to stub out functions for your tests. See the sinon documentation for more details.

To run a single test or a group of tests:

it.only('should do something', function () {
...
})

or

describe.only('with some context', function () {
...
})

Testing the Accessibility of Components

it('should be accessible', function (done) {
  const subject = testbed.render()

  subject.should.be.accessible(done)
})

A custom chai assertion is also provided that wraps the axe-core library to test that your component meets the configured accessibility standards. Note that you have to provide a callback because this runs asynchronously. See the mocha and axe-core documentation for more details.