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.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close