Unit testing

React/Jest

Testing framework

We recommend React Testing Library

Ensure Skylab is transpiled by Jest

The following assumes you are not configuring Jest to enable support for ES Modules. If you are, the following may not apply. Read about using ES Modules with Jest here.

Add transformIgnorePatterns in jest.config.js:

Skylab is exported as an ES module. Jest converts all code to CJS prior to running tests, so it is necessary to exclude the Skylab packages from the ignore pattern.

See jest documentation for further reading.

Defining custom elements

If using @avalara/skylab-sdk/react, it is necessary to define the custom Skylab elements in order for tests to rely on the Skylab components' methods and behaviors. In your jest setup file import and call the defineCustomElements exported from @avalara/skylab-sdk/loader.

Example:

// jest-setup.js // or equivalent setup file that's configured to run before all tests
// see https://jestjs.io/docs/configuration#setupfiles-array

import { defineCustomElements } from "@avalara/skylab-sdk/loader";

defineCustomElements();

Tests in jsdom

Several popular test runners use jsdom. Jest and vitest both use jsdom to run visual tests. Jsdom is a javascript implementation of most, but not all of a browser's functionality. Sometimes tests using jsdom will fail if a skylab-sdk custom element uses a browser method that jsdom does not implement. Example:

requestAnimationFrame is not defined

The pretendToBeVisual jsdom setting might help. In jest, the testEnvironmentOptions lets you configure jsdom. In vitest, use environmentOptions. The library jsdom-testing-mocks might also be helpful.

Other frameworks

If you need help with testing using other UI or test frameworks or if you would like to contribute a guide for testing with a framework not listed here, reach out to the web-platform team via slack in the #skylab channel.