identify suitable testing substitute

[sydneywalcoff]

Overview

Create React App(CRA) deprecated and we had to migrate to Vite for future sustainability. However many of our test suites from #1241 use testing packages from CRA. We need to translate these test suites to use Vite-compatible tests.

Action Items

• identify a new testing substitute
• tag @sydneywalcoff for discussion
• handoff to update test suites #1668
  • add testing library documentation
  • remove dependency The issue or reason why this issue is in the icebox label
  • add ready for dev lead task ready for dev lead to evaluate label
  • move to new issue approval column

[github-actions]

Hey @eburdekin! Thanks for taking this issue.

To help keep everyone in the loop, please comment your Estimated Time to Completion (ETC) below!

Thanks again!

[github-actions]

Hey @eburdekin! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions]

Hey @eburdekin! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[eburdekin]

Hey @sydneywalcoff !

Setup notes for Vitest:

Root folder

• install vitest and @vitest/types npm packages
• uninstall jest
• update scripts in package.json so running npm run test uses vitestcommand instead of react-scripts test
• update vite.config.ts file to add this to defineConfig in addition to plugins
  • some projects would have a separate vitest.config.ts file, but don't think we need one in this case
  • setupTests.js file already set up with @testing-library/jest-dom import
  • Jest has their globals API enabled by default, but Vitest doesn't, so needs to be included in the config
  • to replicate Jest's behavior of running hooks (like beforeEach, used in input button/routing tests) sequentially in Vitest, you can configure Vitest's sequence.hooks to 'list' in the test object

  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/setupTests.js",
    sequence: {
      hooks: 'list',
    },

• update tsconfig.json to add "types": ["vitest"], under compilerOptions

Individual test files

• add import { describe, test, expect, vi } from 'vitest';
• use vi.fn() instead of jest.fn() to mock functions

There may be additional updates needed based on the specifics of each test file, but this should get us most of the way there.

References:
Vitest - Jest migration docs

[github-actions]

Hey @eburdekin! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions]

Hey @eburdekin! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[eburdekin]

Added notes to #1668