Testing Template

Jest

Getting Started

To set up Jest, install jest, jest-environment-jsdom, @testing-library/react, @testing-library/jest-dom:

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom 

The packages will be shown in devDependencies in package.json as

"devDependencies": {
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.7",
    "jest-environment-jsdom": "^29.7.0",
    "ts-jest": "^29.1.1",
  }

Note:

• Only jest related packages are shown here
• @types/jest and ts-jest are also installed, but might not be necessary
• The package versions are not finalized yet, need to check with everyone

Tests in project structure

Each component will have a corresponding <component>.test.tsx test file in the corresponding folder

example

├── components
│   ├── Banner
│   │   └── Banner.test.tsx
│       └── Banner.tsx
│   └── Header
│       ├── Header.test.tsx
│       └── Header.tsx

UI component test

Each component will be unit tested with the following template.

import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import TestingComponent from '@/components/TestingComponentFolder/TestingComponent'

describe('TestingComponent', () => {
  it('renders component', () => {
    render(<TestingComponent />)

    const testingComponent = screen.getByRole('<aria_semantic_name>', {
      name: '',
    })

    expect(testingComponent).toBeInTheDocument()
  })
})

The test starts with rendering <TestingComponent/> from its containing folder. Next, we test the content in <TestingComponent/> by querying the DOM node from the container screen (same as document.body) using getByRole. This method is recommended because an accessible name is needed for the element.

Other methods such as getByLabelText, getByText, getByDisplayValue can also be useful for retrieving form, text elements. See more info here

Then, we use toBeInTheDocument() to check if the element is in the document. This function is a custom DOM matcher in jest-dom for working with Jest. Other matchers can be found under References.

Snapshot test

This test helps make sure we don't have unexpected UI changes. The approved UI snapshot should be stored on main repo

import TestingComponent from '@/components/TestingComponentFolder/TestingComponent'
import { render } from '@testing-library/react'

it('renders testing component unchanged', () => {
  const { container } = render(<TestingComponent />)
  expect(container).toMatchSnapshot()
})

After running a snapshot test, a snapshot will be created under __snapshot__ folder

If there is an intentional structural change, we can update the snapshot with

npm test -- -u

Event test (to be updated)

API function test

How to load environment variable

We usually store tokens in src/.env or src/.env.local. For testing purpose, let's keep the API tokens in src/.env.test or src/.env.test.local instead. Note that keeping it .local means we don't want it on remote repo (should be in .gitignore)

Skipping a test

To skip a test, wrap it with describe.skip() function

describe.skip('skips this test', () => {
  // ... will be skipped
});

References

• How to choose ARIA name for elements: List of ARIA semantics
• Element query with Testing Library: Testing Library Queries
• Custom jest matchers in jest-dom: jest-dom github.