Installing Jest for Testing in Your Vite-React TypeScript Project. A Step-by-Step Guide.
Tags: vite, jest, react, testing
Published: 2023-07-08 13:13:56

## Introduction
Application testing is an important aspect of web development. It helps eliminate bugs before these applications are pushed out to the users. Testing applications also helps in maintaining and refactoring code, especially in collaborative projects where a developer makes a change that is out of context thereby promoting good collaboration among teammates. It also ensures the code quality and correctness.
The aim of the article is to show how unit testing is done in a react-vite app with Jest. From the setup, down to the implementation. 

## Jest
To know more about Jest as a testing framework, visit [jest website](https://jestjs.io/)

## Prerequisite
To get started, we will need the following:
- PC and a text editor. (_Just kidding, of course, we already have that_)
- npm or yarn installed

We will start by creating a react app with Vite then we proceed to set up Jest for the testing and try out some tests on the react components.

## Use Case
### Step 1: Creating the react app with Vite
Open the terminal in your text editor (_For the project, we will be making use of the VSCode_) and proceed to create the react app using the command below:
`npm create vite@latest
`
Follow the wizard and select the desired options

![Vite create react app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcfsgfq1uvij1qs84cj2.png)
From the above, you'd see we have selected React and Typescript, and we called the project "mini-app-testing" so we will be building with Typescript.

- Now run the following commands to get started and install the needed packages, step by step.

`cd mini-app-testing` - to navigate to the project directory.

`npm install` - to install the packages. (_You can also use yarn but we started with npm so we stick with it_).

`npm run dev` - to start the project.

If you have done the above correctly, you should have something like this 
On your VSCode
![App created and installation completed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2iphntmhh591a405f6l.png)

On your browser
![The live server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/deenz41tcp1uyrsr45cq.png)

### Step 2: Setting up Jest
Before we dive into the process, note that Vite has certain limitations with Jest which makes setting up Jest in a Vite application to seem a bit complicated.
Follow the process below to get started

- `npm install jest --save-dev`
- `npm install @testing-library/react --save-dev`
- `npm install ts-jest @types/jest --save-dev`
- In the package.json, add `"test": jest` to the script

```json
// package.json

{
  "name": "mini-app-testing",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "test": "jest"
  },
```
- run `npm run test` and you receive a message saying no test found as seen below.

![No test feedback on terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bq21nasnjzckfbkuccg4.png)

- So to fix the above, In the _src_ folder, we create a folder called __ tests __ and add the test file: src/__ tests __/App.spec.tsx.

![Test file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r3e6cbmrxglcp4qmxw1.png)

- Add a simple test in the test file: App.test.tsx

``` typescript
// src/__ tests __/App.test.tsx

test('demo', () => {
  expect(true).toBe(true)
})

```
- Run the `npm run test` again. Voila!!! our first test passed

![Successful test run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvikr084oa8chvg080se.png)

### Step 3: Testing the components
- To test the components, we import the App.tsx into the App.test.tsx and run a simple truthy test on the App component.

```typescript
// src/__ tests __/App.test.tsx

import { render } from "@testing-library/react"
import App from "../App"

test('demo', () => {
    expect(true).toBe(true)
})

test("Renders the main page", () => {
    render(<App />)
    expect(true).toBeTruthy()
})

```

- Let test again, run `npm run test`. But it will fail due to missing dependencies and configurations as seen below. So it has to be configured to be able to import and read imported components.

![Error message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wo21l6dpb9teqxxkbdsw.png)

- Run `npm install ts-node @testing-library/jest-dom --save-dev`
- Run `npm install jest-environment-jsdom`
- Run `npm install identity-obj-proxy --save-dev`

- In your root directory, create a jest.config.ts file and add the following to it

```typescript
// jest.config.ts

export default {
    preset: 'ts-jest',
    testEnvironment: 'jest-environment-jsdom',
    transform: {
        "^.+\\.tsx?$": "ts-jest" 
    // process `*.tsx` files with `ts-jest`
    },
    moduleNameMapper: {
        '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__ mocks __/fileMock.js',
    },
}
```

- In the src folder, create a test folder, then create a __ mocks __ folder in the test folder and add a fileMock.js file: src/test/__ mocks __/fileMock.js and add the following content:

```javascript
// src/test/__ mocks __/fileMock.js

module.exports = {
    __esModule: true,
    default: 'test-file-stub',
};
```

- In the App.test.tsx, import @testing-library/jest-dom

```typescript
// src/__ tests __/App.test.tsx

import '@testing-library/jest-dom'
import { render } from "@testing-library/react"
import App from "../App"

test('demo', () => {
    expect(true).toBe(true)
})

test("Renders the main page", () => {
    render(<App />)
    expect(true).toBeTruthy()
})
```

- Then run the `npm run test` to check if all issues have been resolved.

![Import Setup successful](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgza9w0ep9imklqriuqz.png)

You can go ahead with your testing process. Happy testing!!!😀

## Conclusion
In summary, incorporating Jest and installing the essential Jest packages in a React Vite application is a simple and uncomplicated process. By following a series of straightforward steps, developers can seamlessly integrate Jest into their projects and harness its robust testing features. With Jest successfully implemented, they can confidently create tests to guarantee the quality and accuracy of their React Vite applications.