How to setup Jest and React Testing Library in Vite project

Zafer Ayan
3 min readMay 21, 2023

Jest, React Testing Library and Vite logo

React projects made with Create Vite App do not have tests by default, so it is necessary to configure it properly. Let’s take a closer look at these steps.

Before you start, you can access the changes here in the link below: https://github.com/ozcanzaferayan/vite-jest-integration/commit/68af95d37849d7cfc6fbd5b005b6e8481896e287

Instructions

1- For little bit complex testing change App.jsx like below

// App.jsx
import "./App.css";
import React from "react";
import { useEffect, useState } from "react";

function App() {
const [todos, setTodos] = useState([]);

useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((response) => response.json())
.then((json) => setTodos(json));
}, []);

return (
<>
{todos.map((todo) => (
<div key={todo.id}>
<h1>{todo.title}</h1>
<p>{todo.completed}</p>
</div>
))}
</>
);
}

export default App;

2- Add App.test.js and App.snapshot.test.js files besides App.jsx file:

// App.test.js
import { render, screen } from "@testing-library/react";

import App from "./App";

describe("App", () => {
let originalFetch;

beforeEach(() => {
originalFetch = global.fetch;
global.fetch = jest.fn(() =>
Promise.resolve({
json: () =>
Promise.resolve([
{
userId: 1,
id: 1,
title: "Kaliteye hoşgeldiniz",
completed: false,
},
]),
})
);
});

afterEach(() => {
global.fetch = originalFetch;
});

it("renders App component", async () => {
render(<App />);
const linkElement = await screen.findByText(/Kaliteye hoşgeldiniz/i);
expect(linkElement).toBeInTheDocument();
});
});
// App.snapshot.test.js
import renderer from "react-test-renderer";

import App from "./App";

test("renders learn react link", () => {
const tree = renderer.create(<App />).toJSON();
expect(tree).toMatchInlineSnapshot();
});

3- Change .eslintrc.cjs with following

module.exports = {
extends: ["react-app", "react-app/jest"],
};

4- Add jest in package and add into package.json

yarn add -D jest
  "scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"test": "jest"
},

5- For JSX support, add babel presets and add .babelrc to your project

yarn add -D @babel/preset-env @babel/preset-react
{
"presets": [
"@babel/preset-env",
["@babel/preset-react", { "runtime": "automatic" }]
]
}

6- Add react testing library dependencies

yarn add -D @testing-library/react @testing-library/jest-dom

8- To support SVG and CSS files add jest-svg-transformer and identity-obj-proxy. Then add into moduleMapper inside package.json jest config

yarn add -D jest-svg-transformer identity-obj-proxy
  "jest": {
"moduleNameMapper": {
"^.+\\.svg$": "jest-svg-transformer",
"^.+\\.(css|less|scss)$": "identity-obj-proxy"
}
}

9- To support web environment API, install jest-environment-jsdom add into jest config:

yarn add -D jest-environment-jsdom
  "jest": {
"testEnvironment": "jsdom",
"moduleNameMapper": {
"^.+\\.svg$": "jest-svg-transformer",
"^.+\\.(css|less|scss)$": "identity-obj-proxy"
}
}

10- Additionally add @testing-library/jest-dom package and configure setupTests.js

yarn add -D jest-environment-jsdom
"jest": {
"testEnvironment": "jsdom",
"moduleNameMapper": {
"^.+\\.svg$": "jest-svg-transformer",
"^.+\\.(css|less|scss)$": "identity-obj-proxy"
},
"setupFilesAfterEnv": [
"<rootDir>/setupTests.js"
]
}
// setupTests.js
import "@testing-library/jest-dom";

11- And finally for snapshot testing add react-test-renderer

yarn add -D react-test-renderer

12- You can start tests with yarn test now

yarn test

In conclusion

Adding Jest and React Testing Library can sometimes be difficult and complicated. However, it is possible to add them to your project with these steps.

If there are parts of this article that you think are missing / incorrect, you can contact me. See you again in my next post…

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Responses (6)

Write a response

Getting error when I try to use import.meta.env.BASE_URL
src: "".concat(import.meta.env.BASE_URL, "/vite.svg"),
^^^^
SyntaxError: Cannot use 'import.meta' outside a module
1 | import { render, screen } from "@testing-library/react";
2 |
> 3 | import App…

Spent many hours trying to set up Testing Library with Jest in an old project that I migrated to Vite from CRA. Ended up following your guide copying missing files/config settings to my old project and it worked like a charm. Thanks!

I ran into the issue where I got "SyntaxError: Cannot use 'import.meta' outside a module" which I solved with instructions here: https://dev.to/rubymuibi/jest-and-vite-cannot-use-importmeta-outside-a-module-24n3
Then my environment variables were…