DEV Community

Vinodh Kumar
Vinodh Kumar

Posted on • Updated on

Create a react app using Vite - Part 3

Unit testing

Vitest is a new framework that is gaining popularity with the developers who are using Vite. Let's see how to configure it for our project.

  • Install the necessary packages
pnpm add -D vitest @vitest/coverage-v8
pnpm add -D @testing-library/react jsdom @testing-library/jest-dom
Enter fullscreen mode Exit fullscreen mode
  • Create the src/setupTests.ts file and update it with the below content.
 touch src/setupTests.ts
Enter fullscreen mode Exit fullscreen mode
// This import will add the DOM related assertions support to the expect statement.
import { beforeAll, beforeEach, afterAll, afterEach } from 'vitest'

import '@testing-library/jest-dom/vitest'

beforeAll(() => {
  // Add your global beforeAll logics
})

beforeEach(() => {
  // Add your globalbeforeEach logics
})

afterAll(() => {
  // Add your global afterAll logics
})

afterEach(() => {
  // Add your global afterEach logics
})
Enter fullscreen mode Exit fullscreen mode
  • Create a test file for the app component and update it like the below,
touch src/App.test.tsx
Enter fullscreen mode Exit fullscreen mode
import { render, screen } from '@testing-library/react'
import { App } from './App'
import { describe, expect, test } from 'vitest'

describe('Component | App', () => {
  test('should render the app component', () => {
    render(<App />)
    expect(screen.getByText('Rendered from react app')).toBeInTheDocument()
  })
})
Enter fullscreen mode Exit fullscreen mode
  • Update the package scripts for running tests
npm pkg set scripts.test="vitest"
npm pkg set scripts.test:cov="vitest run --coverage"
Enter fullscreen mode Exit fullscreen mode
  • Run the tests
  pnpm test
Enter fullscreen mode Exit fullscreen mode
  • To run a particular test use the -t param.
  pnpm test -- -t "add"
Enter fullscreen mode Exit fullscreen mode

Sample repo

The code for this series is hosted in Github here.

Please take a look at the Github repo and let me know your feedback, and queries in the comments section.

Top comments (0)