Show Unit Tests widget

This sample demonstrates how to write unit tests for a widget.

How to use the sample

Clone the sample repo and copy this widget's folder (within widgets) to the client/your-extensions/widgets folder of your Experience Builder installation. Then to run the unit tests, run npm run test in the client folder.

How it works

The main focus of this sample is tests/widget.test.tsx. It uses jest.mock(...) to mock the modules from the ArcGIS API for JavaScript that the widget is using.

jest.mock('jimu-core', () => {
  return {
    ...jest.requireActual('jimu-core'),
    loadArcGISJSAPIModule: jest.fn().mockImplementation(moduleId => {
      let module;
      if (moduleId === 'esri/layers/FeatureLayer') {
        module = jest.fn().mockImplementation(() => {
          return {
            queryFeatureCount: () => Promise.resolve(5)
          }
        });
      }
      return Promise.resolve(module)
    })
  }
});

Then it uses behavior-driven development unit testing patterns like describe(..), it(...), and expect(..) to specify the unit tests.

describe('test show-ut widget', () => {
  it('test p1, use render props', () => {
    const { queryByText, rerender } = render(<Widget config={{ p1: true }} />);
    expect(queryByText('p1 is checked.').className).toBe('has-p1');

    rerender(<Widget config={{ p1: false }} />);
    expect(queryByText('p1 is checked.')).toBeNull();
  })
  // ...
});

When the tests are run by using the command npm run test, all test files are run, and the results are reported back to you in the terminal.