Testing With Boards

Boards aren't only there to look good – they can also be used to test your code. The @wixc3/react-board helper package provides a set of helper methods for rendering boards in tests.

Helper Methods

The helper package provides two helper methods for rendering and setting up your boards for use in tests:

setupBoardStage: Accepts a board and returns a canvas for rendering into, along with a cleanup method.
renderBoard: Accepts a board and renders into a canvas created by calling setupBoardToStage.

Here's a quick example of using renderBoard in a component test:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { expect } from 'chai';
import { renderBoard } from '@wixc3/react-board';
import { CheckboxDriver } from './checkbox.driver';
import CheckboxWithWrapper from '../_codux/boards/checkbox/checkbox-with-wrapper-board';
   
describe(`Checkbox`, () => {
    let(`can be toggled`, () => {
        const { canvas, cleanup } = renderBoard(CheckboxWithWrapper);
        const checkbox = new CheckboxDriver(canvas.children[0]);
        expect(checkbox.isChecked()).equal(false);
        checkbox.toggle();
        expect(checkbox.isChecked()).equal(true);
        cleanup();
    });
});

Was this article helpful?

Yes

Codux Help Center

Browse our articles to find the answers you need

Testing With Boards

Helper Methods