DEV Community: Abhishek V

Vitest - Blazing fast component testing for React

Abhishek V — Fri, 06 Oct 2023 06:31:35 +0000

Source Code available at Github

Introduction

Unit testing is a crucial practice in software development that involves evaluating individual units of code to ensure they function correctly. It forms an integral part of Test-Driven Development (TDD), a methodical approach that emphasizes continuous testing and revision during the development process. In this article, we will explore how to utilize Vitest, a modern testing framework powered by Vite, to rigorously test React components. Our primary goal is to validate the functionality of our code and detect potential bugs early in the development cycle.

Why Vitest?

Vitest stands out as a cutting-edge testing framework, benefiting from the speed and efficiency of the Vite build tool. It offers a zero-config setup, simplifying the testing process for React components.

To follow along with this tutorial, you can clone the Starter Project and switch to the before-vitest branch using the following commands:



git clone https://github.com/Abhi0498-Blogs/vitest-react.git
cd vitest-react
git checkout before-vitest
npm i
npm run dev

This will initiate the development server, accessible at http://localhost:5173.

Begin by installing Vitest and @testing-library/react:



yarn add -D vitest @testing-library/react

Now, let's configure our vite.config.js file as follows:



// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
  },
});

In this configuration:

globals makes all variables available in test files.
environment sets the environment to jsdom, which is the default environment for Vitest.

To manage testing, update your package.json scripts:



// package.json
{
  "scripts": {
    "test": "vitest",
    "test:watch": "vitest --watch",
    "test:ui": "vitest --ui",
    "test:coverage": "vitest --coverage"
  }
}

These scripts facilitate various testing scenarios:

test: Run all tests.
test:watch: Execute tests in watch mode.
test:ui: Launch the Vitest UI.
test:coverage: Generate a coverage report.

Setting up the Test Environment

Create a __tests__ folder within the src directory to house your tests:



mkdir src/__tests__

Now, let's take a closer look at the src/components/buttons/ folder, which contains four components: IncreaseButton, DecreaseButton, IncreaseBy10Button, and DecreaseBy10Button. We'll begin by testing the IncreaseButton component.

Create a new file called IncreaseButton.test.jsx within the __tests__ folder:



touch src/__tests__/IncreaseButton.test.jsx

Now, let's start writing our first test:



// src/__tests__/IncreaseButton.test.jsx
import { describe, expect, test } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import IncreaseButton from "../components/buttons/increase";
import { useState } from "react";

describe("IncreaseButton", () => {
  test("renders", () => {
    render(<IncreaseButton />);
    expect(screen.getByText("Increase")).toBeDefined();
  });
});

In the code above:

describe is used to group tests together.
test is used to define a test case.
render renders the component.
screen provides access to DOM elements.
expect is used for assertions.

By executing this test, we ensure that the component renders without errors. If the "Increase" text is found in the DOM, the test passes; otherwise, it fails.

Now, let's run the test:



npm run test

If the test succeeds, you'll see a result similar to this:

This represents a test case—a set of conditions used to validate the system under test (SUT). Additionally, it highlights the importance of testing, as any future changes to the component that alter the text "Increase" will trigger a test failure.

Testing Component Behavior

Let's write a test to verify that the count increases when the button is clicked. To achieve this, we'll add another test within the describe block:



// src/__tests__/IncreaseButton.test.jsx
test("should increase count by 1", () => {
  // Arrange
  const ButtonWithCount = () => {
    const [count, setCount] = useState(0);
    return (
      <>
        <div data-testid="count">{count}</div>

        <IncreaseButton setCount={setCount} />
      </>
    );
  };

  // Act
  render(<ButtonWithCount />);

  const count = screen.getByTestId("count");
  const button = screen.getByText("Increase");

  fireEvent.click(button);

  // Assert
  expect(count.textContent).toBe("1");
});

In this test:

We create a component called ButtonWithCount, which includes a count state and the IncreaseButton component.
The render function renders ButtonWithCount.
fireEvent is used to simulate a click on the button.
expect is employed to assert that the count has increased to 1.

Now, let's run this test using the Vitest UI:



npm run test:ui

You'll see the Vitest UI, where you can execute your tests:

Running tests in the UI offers a visual and interactive approach to testing your components.

Conclusion

In this tutorial, we've covered the fundamentals of unit testing using Vitest and how to test React components effectively. Remember that this is just the beginning, and there are more components in the src/components/buttons/ folder that you can test to gain a deeper understanding of Vitest.

By writing tests for your code, you not only ensure its reliability but also catch potential issues early in the development process. Embrace testing as a vital practice in your software development journey.

Happy Coding! 🎉

Zustand - React Global State Management Made Easy

Abhishek V — Fri, 06 Oct 2023 05:08:56 +0000

Source code available on Github.

Introduction

In any React application, efficiently sharing state between components is crucial. While React's Context API is suitable for simple applications, complex ones demand a more robust solution. That's where Zustand comes into play. In React, we often turn to Redux for global state management, but Zustand offers a lightweight alternative. It leverages React Hooks API, boasts a small bundle size, and seamlessly integrates with TypeScript. In this article, we'll explore how to harness Zustand for global state management in React applications.

Why Zustand over Redux?

Before diving into Zustand, let's briefly consider why you might prefer it over Redux:

Lightweight: Zustand is a compact, fast, and scalable state management library.
Hooks-Based: It's built on top of React Hooks API, making it more intuitive for React developers.
Minimal Boilerplate: Zustand significantly reduces the amount of boilerplate code compared to Redux.
TypeScript-Friendly: It easily integrates with TypeScript, ensuring strong type checking.

In summary, Zustand presents a simple yet powerful alternative to Redux for handling global state in React applications.

Getting Started

To demonstrate how Zustand works, let's create a new React application. For this tutorial, we'll use Vite, but you can use any other tool of your choice. First, create a new project:



npm create vite-app zustand-react

After generating the project, you can delete the unnecessary files, leaving you with the following folder structure:

Now, let's install Zustand:



npm install zustand

To start the development server, run:



npm run dev

Refactoring the App Component

In the initial code, the App component manages a counter using the useState hook. We will refactor this code to use Zustand for state management.



import React from "react";
import Counter from "./components/Counter";

function App() {
  return (
    <>
      <h1>Vite + React</h1>
      <Counter />
    </>
  );
}

export default App;

In this refactored version, we've removed the count and setCount states from the App component, as we'll use Zustand to manage the state of the counter.

Creating Components

Now, let's create two components for our counter: Button and Counter.

Button Component



import React from "react";
import useCounter from "../store/counter";

const Button = ({ children, action }) => {
  const { increase, decrease } = useCounter();

  const handleClick = action === "increase" ? increase : decrease;

  return <button onClick={handleClick}>{children}</button>;
};

export default Button;

In this updated Button component, we've removed the setCount prop and are instead using the increase and decrease functions from the useCounter hook.

Counter Component



import React from "react";
import Button from "./Button";
import useCounter from "../store/counter";

const Counter = () => {
  const { count } = useCounter();

  return (
    <>
      <div className="card">
        <Button action="increase">Increase</Button>
        <div>{count}</div>
        <Button action="decrease">Decrease</Button>
      </div>
    </>
  );
};

export default Counter;

In the refactored Counter component, we've eliminated the need for count and setCount props by utilizing the count state from the useCounter hook.

Leveraging Zustand's Power

To showcase the full potential of Zustand, let's enhance our counter store.



// store/counter.js
import { create } from "zustand";

const useCounter = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

export default useCounter;

Here, we've added increase and decrease functions to the store. These functions update the count state using the set function provided by Zustand.

Now, let's update the Button component to utilize these functions directly:



// components/Button.jsx
import React from "react";
import useCounter from "../store/counter";

const Button = ({ children, action }) => {
  const { increase, decrease } = useCounter();

  const handleClick = action === "increase" ? increase : decrease;

  return <button onClick={handleClick}>{children}</button>;
};

export default Button;

By doing this, we've eliminated the need for the setCount prop in the Button component, showcasing Zustand's simplicity in state management.

Conclusion

In this article, we've explored how Zustand can be a lightweight yet robust alternative to Redux for global state management in React applications. By centralizing state management in a store and leveraging hooks, Zustand simplifies complex state management scenarios, reducing the need for prop drilling and boilerplate code.

To learn more about Zustand and its advanced features, refer to the official documentation and consider using it in your future React projects for efficient global state management.

Happy coding! 🚀

React Micro-Frontends using Vite

Abhishek V — Thu, 05 Oct 2023 19:24:25 +0000

Source code for this article is available on GitHub.

In this article
Introduction
What is a Micro Frontend?
Module Federation
Why Vite?
Creating a Micro Frontend using Vite + React
- Setting Up the Host App
- Setting Up the Remote App
- Creating Components in the Remote App
- Previewing the Remote App
- Adding Module Federation to the Remote App
- Serving the Remote App
- Adding Module Federation to the Host App
- Using Remote Components in the Host App
- Serving the Host App
Conclusion

Introduction

Micro Frontends: Enhancing Web Development with Vite and Module Federation

In this article, we'll explore the concept of Micro Frontends—a powerful architectural approach for web applications. Micro Frontends allow you to divide your front-end code into smaller, independently developed and deployable units. These units, known as micro frontends, offer numerous benefits, including increased development speed, scalability, and flexibility. By enabling different teams to work on separate parts of the front end while maintaining integration through an isolation layer, Micro Frontends help manage complexity and promote autonomy in front-end development.

What is a Micro Frontend?

A Micro Frontend is an architectural approach for web applications where the front-end code is divided into smaller, independently developed and deployable units called micro frontends. This approach enhances development speed, scalability, and flexibility by allowing different teams to work on separate parts of the front end while maintaining integration through an isolation layer. It's a way to manage complexity and promote autonomy in front-end development.

Module Federation

Module Federation is a key technology that enables a JavaScript application to load code dynamically from another application while sharing dependencies. When an application consuming a federated module lacks a required dependency, Webpack (the underlying technology) automatically fetches the missing dependency from the federated build source. This allows for efficient sharing and use of common libraries across multiple micro frontends.

Why Vite?

While Module Federation was initially introduced in Webpack, the landscape of JavaScript development has evolved. Vite has emerged as a game-changer by providing lightning-fast build times. Combining Vite and Module Federation can unlock immense capabilities for developing micro frontends quickly and efficiently.

Creating a Micro Frontend using Vite + React

Creating a micro frontend typically involves two main parts:

Host Application: This is the primary application that users interact with. It serves as the container for the micro frontends.
Remote Application: These are the micro frontends themselves, which act as building blocks for the host application.

Now that we have an understanding of the technologies we'll be using, let's dive into the practical implementation.

Setting Up the Host App

To create a host application using Vite and React, run the following command:



# Using npm 6.x
npm create vite@latest host-app --template react

# Using npm 7+, add an extra double-dash:
npm create vite@latest host-app -- --template react

Setting Up the Remote App

For the remote application, execute the following command:



npm create vite@latest todo-components -- --template react

This will create two folders, host-app and todo-components. Next, install the dependencies for both apps:



npm install

Creating Components in the Remote App

In the todo-components app, create the following components:



// components/List.jsx
import React from "react";

const List = (props) => {
  const { items } = props;
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default List;



// components/Input.jsx
import React from "react";

const Input = (props) => {
  const { value, onChange, onSubmit } = props;
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        onSubmit(e);
      }}
    >
      <div className="flex-row">
        <input
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
        />
        <button type="submit">Add</button>
      </div>
    </form>
  );
};

export default Input;

Now that the components are ready, make the following changes to the App.jsx file:



// App.jsx
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import Input from "./components/Input";
import List from "./components/List";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Input value={count} onChange={setCount} onSubmit={console.log} />
      <List items={["Learn React", "Learn Vite", "Make an awesome app"]} />
    </>
  );
}

export default App;

Previewing the Remote App

To preview the components, run the following command in the todo-components app:



npm run dev

You should see the following output.

Adding Module Federation to the Remote App

Now, let's add Module Federation to the todo-components app. First, install the necessary dependencies:



npm install @originjs/vite-plugin-federation --save-dev

Next, configure Module Federation in the vite.config.js file:



// vite.config.js in todo-components
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "todo-components",
      filename: "remoteEntry.js",
      exposes: {
        "./List": "./src/components/List.jsx",
        "./Input": "./src/components/Input.jsx",
      },
      shared: ["react"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
});

In this configuration:

name: Specifies the name of the remote app.
filename: Sets the name of the file generated by Module Federation.
exposes: Lists the components to expose from the remote app.
shared: Declares shared dependencies, such as React, to optimize the bundle size.

Now, build the remote app:



npm run build

This generates a dist folder in the todo-components app containing a remoteEntry.js file.

Serving the Remote App

Serve the remote app locally:



npm run preview

This serves the remote app on port 4173.

Adding Module Federation to the Host App

To use the remote app components in the host app, set up Module Federation in the vite.config.js file of the host app:



// vite.config.js in host-app
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "host-app",
      remotes: {
        todo_components: "http://localhost:4173/assets/remoteEntry.js",
      },
      shared: ["react"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",

    minify: false,
    cssCodeSplit: false,
  },
});

In this configuration:

name: Specifies the name of the host app.
remotes: Lists the remote apps to be used by the host app. In this case, we have one remote app, "todo_components," and we provide the URL of its remoteEntry.js file.
shared: Declares shared dependencies, such as React, to optimize the bundle size.

Using Remote Components in the Host App

Now, you can import and use the remote app components in the host app's App.jsx:



// App.jsx in host-app
import { useState } from "react";
import List from "todo_components/List";
import Input from "todo_components/Input";

function App() {
  const [newTodo, setNewTodo] = useState("");
  const [todos, setTodos] = useState([]);
  const onSubmit = () => {
    setTodos((prev) => [...prev, newTodo]);
    setNewTodo("");
  };

  return (
    <>
      <Input value={newTodo} onChange={setNewTodo} onSubmit={onSubmit} />
      <List items={todos} />
    </>
  );
}

export default App;

Here, we import the components from the remote app using the specified remote name, "todo_components."

Serving the Host App

To serve the host app locally, run:



npm run dev

Now, you should see that the components from the remote app are being used seamlessly in the host app.

Conclusion

In this article, we've explored the concept of Micro Frontends and demonstrated how to create a micro frontend architecture using Vite and React, enhanced with Module Federation. By leveraging the power of Vite's fast build times and Module Federation's dynamic code loading capabilities, you can efficiently develop and scale web applications in a modular and maintainable way. This approach empowers multiple teams to work on different parts of the app independently, promoting flexibility and agility in front-end development.

For further exploration and to apply these concepts to your own projects, feel free to adapt and expand upon the examples provided here. Micro Frontends, when used judiciously, can significantly streamline your web development workflow.