Testing

Fluent UI's React-based packages use various frameworks for different types of testing.

Unit and functional tests

Most of Fluent UI's tests are built using Jest. This allows us to run tests in a Node environment but simulates the browser using jsdom.

On top of Jest, we use React Testing Library for rendering and interacting with React components. (Some legacy tests still use Enzyme and/or react-test-renderer.)

For more details:

• Jest testing in @fluentui/react-components ("v9") and @fluentui/react ("v8")
• Testing in @fluentui/react-northstar ("v0")

End-to-end (in-browser) tests

Some scenarios, particularly those relating to focus management, cannot be realistically/reliably tested with jsdom. In these cases we use Cypress for testing with a real browser.

For more details:

• E2E testing in @fluentui/react-components ("v9") and @fluentui/react ("v8")
• E2E testing in @fluentui/react-northstar ("v0")

Visual regression tests

We use Screener with Storybook to document and test various UI states of our components.

For more details:

• Visual testing in @fluentui/react-components ("v9") and @fluentui/react ("v8")
• Visual testing in @fluentui/react-northstar ("v0")