Recently I've been reading a book "Learning Test Driven Development" by Saleem Siddiqui. After reading a couple of chapters I wanted to try out TDD in practice. In this blog, we'll explore what is TDD and how we can set up TDD in React + Typescript (because I'm officially now a typescript fan-boy !) using Vite.
What is TDD
According to Wikipedia,
"Test-driven development (TDD) is a software development process relying on software requirements being converted to test cases before the software is fully developed, and tracking all software development by repeatedly testing the software against all test cases. This is as opposed to software being developed first and test cases created later."
In short, we write test cases first and then code the implementation.
Why TDD ?
The goal of TDD is to write code that is simple, well-designed, and easy to maintain, by building it up incrementally through a series of small, focused steps. It also helps to ensure that the code works correctly, by providing a set of automated tests that can be run anytime to verify its behaviour.
Scaffolding React project using Vite
Now that we have some idea about what is TDD and why we should use TDD, let's get started with scaffolding our project. Run the following command :
pnpm create vite app --template react-ts
cd app
pnpm install
Here we are using pnpm ( you can use npm or yarn ) to create our vite project called app and we're using react-ts template which will set up react and typescript for us.
Install dependencies and setup test file
After that, we'll install some dependencies ( testing library, unit test framework - vitest and types ) :
pnpm i -D vitest @testing-library/react @testing-library/jest-dom jsdom
# install types
pnpm i -D @types/testing-library__jest-dom
Once all the dependencies are installed, we need to create test file in src folder :
touch src/setupTest.ts
and inside setupTest.ts add the following import :
import "@testing-library/jest-dom"
Add test config inside vite.config.ts
Inside vite.config.ts we need to add a triple-slash directive so vite config can get vitest types and test config as follows :
/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
test: {
globals: true,
environment: "jsdom",
setupFiles: "./src/setupTest.ts",
// speed up since test don't rely on css
css: false,
}
})
In the test config, we are setting globals as true. Doing so we can now directly import describe , expect without importing.
Update package.json
Now add one script test inside package.json which will run vitest :
"scripts": {
/* ... other scripts */
"test" : "vitest"
}
Writing Frist Test Case
Since we've set up our TDD environment. Let's write our first test case for mounting and rendering of App Component. First, create App.test.tsx file and write the following code inside it
// inside App.test.tsx
import { render, screen } from "@testing-library/react"
import App from "./App"
describe("App", () => {
it("should render app", () => {
render(<App />)
expect(screen.getByText(/Vite \+ React/i)).toBeInTheDocument()
})
})
Run test script using :
pnpm run test
By default, the test will run in watch mode. If you want to run the test only once then stop after running, you can do so by changing the script to vitest run. More on Vitest docs.
Congratulations! You've successfully set up TDD environment for React ( and typescript ) using Vite. Now you can write tests before the implementation and get confidence every time when all the test cases pass.