Skip to content

Update batch of components from Jest to Vitest #6355

@joshblack

Description

@joshblack

We are moving our test suite from Jest to Vitest. This issue tracks updating the following component test:

  • packages/react/src/deprecated/UnderlineNav/UnderlineNav.test.tsx
  • packages/react/src/Link/tests/Link.test.tsx
  • packages/react/src/Popover/Popover.test.tsx
  • packages/react/src/Hidden/Hidden.test.tsx
  • packages/react/src/Header/Header.test.tsx

We've migrated some test files already, you can use packages/react/src/Banner/Banner.test.tsx as an example. When migrating, make sure to:

  • Update packages/react/src/vitest.config.browser.mts to include the component that you're migrating in the include config
  • Update packages/react/src/jest.config.js to exclude the component that you're migrating in the modulePathIgnorePatterns config
  • Remove any behavesAsComponent usage
  • Remove any checkExports usage
  • Remove any tests that make axe assertions with toHaveNoViolations
  • Remove any setupMatchMedia usage
  • Update tests that use render from utils/testing to instead use render from @testing-library/react
  • Use npx vitest --run with the path to the test file you've updated to validate your changes
  • You can update snapshots using npx vitest --run -u with the path to the test file you would like to update snapshots for
  • Do not migrate test files that are for types, these files end with *.types.test.tsx
  • If you run into a test that uses it.skip, you can enable it now that we're moving to vitest

After migrating all components:

  • Use npx prettier --write with the path to the test files to format the file according to the prettier rules on the project
  • Use npx eslint with the path to the test files you've updated to make sure there are no eslint errors with your changes

Make sure to keep in mind:

  • All npx commands should be run from the root of the project
  • Tests should not emit an act() warning when updated
  • Do not remove any tests when migrating

Metadata

Metadata

Assignees

Labels

reactstaffAuthor is a staff member

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions