Next.js is a popular React framework known for its server-side rendering, static site generation, and hybrid capabilities, which make it an excellent choice for building high-performance, SEO-friendly web applications. Vitest is a fast and lightweight testing framework, inspired by Vite, designed to provide a seamless and efficient testing experience for modern JavaScript applications.
Combining Next.js with Vitest allows developers to create robust and maintainable codebases with comprehensive testing coverage. Vitest supports a range of testing needs, including unit tests, integration tests, and end-to-end tests, and its integration with Vite ensures fast and optimized builds. This combination empowers developers to catch bugs early, ensure application stability, and deliver high-quality Next.js applications with confidence.
Setting up Vitest Testing for Next.js Application
Step 1: Initialising the project
npx create-next-app@latest vitest-app
cd vitest-app
Step 2: Install Vitest and related dependencies
npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
Project Structure:
Dependencies:
"dependencies": {
"next": "latest",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"server-only": "^0.0.1"
},
"devDependencies": {
"@testing-library/react": "14.1.2",
"@types/node": "20.10.4",
"@types/react": "18.2.45",
"@vitejs/plugin-react": "^4.2.1",
"jsdom": "^23.0.1",
"typescript": "5.3.3",
"vitest": "1.0.4"
}
Step 3: Create a vitest configuration file
Create a vitest config file, in the root dir, which has vitest configurations setup.
Filename: vitest.config.js
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
test: {
environment: "jsdom",
},
});
Step 4: Create a react component
Create a basic react component that shows the name of the user passed in props on the screen. Rename the file "index.js" which is present inside the "pages" dir, to "index.jsx", and update the file content with the one mentioned below.
Filename: pages/index.jsx
export default function Home() {
return <div>Hello!</div>;
}
Step 5: Write unit test for Hello.js
Create a test file in the test dir, and write unit test for the above component
Filename: __tests__/Home.test.jsx
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import Home from "../pages/index";
describe("Home", () => {
it("should render 'Hello!'", () => {
render(<Home />);
expect(screen.getByText("Hello!")).toBeDefined();
});
});
Step 6: Add script to run test
Now, add a command in the "package.json" file to run the tests using vitest.
Filename: package.json
{
"name": "vitest-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "vitest" // add this command to run the test
}
Step 7: Run the test
Now, run the test using the below command:
npm test
Output:
Similar Reads
NextJS Jest Testing
Jest is a delightful JavaScript testing framework with a focus on simplicity. It's widely used with React applications and integrates well with Next.js to provide robust testing capabilities. This article explores how to set up and use Jest for testing in a Next.js application.Steps to Create an App
2 min read
Testing with Jest
Jest is a JavaScript testing framework developed by Facebook, designed primarily for unit testing React applications. However, it can be used for testing any JavaScript codebase. Jest is known for its simplicity, speed, and built-in features, making it one of the most popular choices for testing Jav
4 min read
Next JS vs Vite
Next.js is a React framework that has built-in features for interactive applications and offers features like server-side rendering and routing. Vite is a fast-building tool of React that focuses on speed and modern development for any project.Table of ContentDifferences between the Next JS and Vite
3 min read
Next.js Cypress Testing
Cypress is an open-source website testing tool that is used to automate tests for JavaScript web applications. It is designed for end-to-end testing and it can be used for Unit tests and Integration tests as well. It is fast, reliable, and can run in real-time directly in the browser.It's built to w
3 min read
Next.js TypeScript
NextJS is a powerful and popular JavaScript framework that is used for building server-rendered React applications. . It provides a development environment with built-in support for TypeScript, as well as a set of features that make it easy to build and deploy web applications. It was developed by Z
4 min read
Next.js on Vercel
Vercel is the platform created by the team behind Next.js, designed to seamlessly deploy and host Next.js applications. Vercel offers a range of features optimized for Next.js, including automatic static optimization, serverless functions, and edge caching.In this article, we are going to see the fe
2 min read
Visual Testing - Software Testing
Visual Testing is also called Visual UI Testing. It validates whether the developed software user interface (UI) is compatible with the user's view. It ensures that the developed web design is correctly following the spaces, sizes, shapes, and positions of UI elements. It also ensures that the eleme
10 min read
Node.js with TypeScript
If you're immersed in the world of Node.js development, you're likely acquainted with the hurdles of handling and expanding a substantial codebase. A viable solution to tackle this is leveraging TypeScript, a statically-typed superset of JavaScript. TypeScript enriches the language with optional typ
6 min read
Unit Testing of Node.js Application
Node.js is a widely used javascript library based on Chrome's V8 JavaScript engine for developing server-side applications in web development. Unit Testing is a software testing method where individual units/components are tested in isolation. A unit can be described as the smallest testable part of
5 min read
How to Perform Testing in Node.js ?
Testing is a method to check whether the functionality of an application is the same as expected or not. It helps to ensure that the output is the same as the required output. How Testing can be done in Node.js? There are various methods by which tasting can be done in Node.js, but one of the simple
2 min read