Frontend ‐ Testing

We use several automated testing strategies for the napari hub frontend. Testing is handled entirely using Jest and community plugins. For unit and integration tests, we use Jest with React Testing Library, and for E2E tests, we use Jest and Playwright.

Fixture Data

We include fixture data in fixtures/. This data is used for mocking backend data to provide consistent test results.

Unit / Integration Tests

Test files are located in src/, and will usually be colocated with the module its testing. For example, if we have a component Component.tsx, a corresponding test file will look like Component.test.tsx. We make no distinction between unit and integration tests since the testing code is similar for both. To run unit / integration tests, use the test package script:

yarn test

Running in watch mode will only re-run failed tests if the test file is modified.

yarn test:watch

It's also possible to target specific file patterns:

# Matches src/components/TestComponent/TestComponent.test.tsx.
yarn test TestComponent

# Matches src/utils/**/*.test.ts.
yarn test src/utils

# Matches src/components/common/**/*.test.ts.
yarn test:watch components/common

E2E Tests

E2E tests are located in tests/, and are similar to running unit / integration tests. Under the hood, tests use Playwright for browser automation.

To run tests, use the e2e package script:

# Run all tests.
yarn e2e

# Run tests in watch mode.
yarn e2e:watch

# Run specific tests.
yarn e2e page

Snapshots

Some tests use snapshots for testing. When updating a component, you may need to update the test snapshots. To update the snapshots, use the test:update script:

yarn test:update