Testing
Elizabeth Craig edited this page Apr 11, 2022
·
19 revisions
Fluent UI's React-based packages use various frameworks for different types of testing.
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")
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")
We use Screener with Storybook to document and test various UI states of our components.
For more details:
- FAQ - Fabric and Stardust to Fluent UI
-
@fluentui/react
Version 9 -
@fluentui/react
Version 8 - Contributing to the
7.0
branch - How to apply themes (version 7/8)
- Planning and development process (for work by the core team)
- Conducting meetings Style guide
- Keeping up with review requests
- RFC review process
- Setup (configuring your environment)
- Fluent UI React version 7/8
- CLA
- Overview
- Repo structure
- Development process
- Contributing to previous versions
- API Extractor
- Build command changes made in early 2020
- Component implementation guide
- Creating a component
- Implementation Best Practices
- Theming
- Documenting
- Styling (old approach)
- Overview
- Testing with Jest
- E2E testing (Cypress)
- Visual testing (Screener)
- Accessibility review checklist