Paul SerbanSoftware Engineer

Using Pact for Contract Testing in the MERN Stack: A Complete GuideStep-by-Step Guide to Setting Up Pact for Contract Testing in MERN Stack Applications

Introduction: Why Contract Testing Is Essential in MERN Stack Applications

In modern web development, particularly when building with the MERN stack (MongoDB, Express.js, React, and Node.js), maintaining seamless communication between frontend and backend services is critical. As applications grow and evolve, the risk of breaking APIs due to changes in the backend or frontend increases. This is where contract testing comes into play, ensuring that consumer-provider relationships remain intact even as both sides evolve.

Pact is a popular tool used for implementing consumer-driven contract testing, which is especially useful in microservices architectures. In the context of a MERN stack application, Pact helps ensure that the Node.js backend consistently provides the data that the React frontend expects, and vice versa. In this blog post, we will explore how to set up Pact for contract testing in MERN stack applications, walking you through the process from installation to integrating tests into your CI/CD pipeline.

Understanding the Role of Pact in Contract Testing

Pact is an open-source tool designed to manage consumer-driven contracts. It enables you to create a formal contract between a consumer (like a React frontend) and a provider (such as a Node.js backend). This contract specifies the expected structure of the data exchanged between the two services, including request formats, response structures, and status codes.

When using Pact, contract tests are written to verify that:

  • The consumer (React app) only requests the data it needs from the provider (Node.js backend).
  • The provider adheres to the contract by delivering data in the expected format.

One of the key benefits of Pact is that it allows for isolated testing. The consumer and provider can be tested independently, ensuring that changes on one side don’t inadvertently break the other. For instance, when the backend makes changes, you can run the contract tests to verify that the React frontend still works as expected, without needing to spin up the entire system.

Setting Up Pact in a MERN Stack Application

In this section, we’ll walk through how to set up Pact for contract testing in a MERN stack application.

Installing Dependencies

First, you’ll need to install the necessary Pact libraries for both the consumer (React) and the provider (Node.js). Begin by navigating to your project directories and installing Pact:

For the React frontend, install Pact:

npm install @pact-foundation/pact @pact-foundation/pact-web --save-dev

For the Node.js backend, install Pact:

npm install @pact-foundation/pact --save-dev

These libraries allow you to create contracts on the consumer side and verify them on the provider side.

Writing Consumer Tests (React Frontend)

In consumer-driven contract testing, the consumer (React) defines the contract. Let's assume the React frontend calls a /users/:id API to fetch user data. Here’s an example of a consumer test using Pact in a React project:

const { Pact } = require("@pact-foundation/pact");
const fetchUser = require("./fetchUser"); // A function that fetches user data via API

describe("User API Pact Test", () => {
  const provider = new Pact({
    consumer: "ReactFrontend",
    provider: "NodeBackend",
    port: 1234,
  });

  before(() => provider.setup());

  after(() => provider.finalize());

  it("should return user data as expected by the React frontend", async () => {
    await provider.addInteraction({
      state: "User with ID 123 exists",
      uponReceiving: "a request for user data",
      withRequest: {
        method: "GET",
        path: "/users/123",
        headers: { Accept: "application/json" },
      },
      willRespondWith: {
        status: 200,
        headers: { "Content-Type": "application/json" },
        body: {
          id: "123",
          name: "John Doe",
          email: "john@example.com",
        },
      },
    });

    const response = await fetchUser("123"); // Consumer function that calls API
    expect(response.name).toEqual("John Doe");
    expect(response.email).toEqual("john@example.com");
  });
});

In this test, the consumer (React app) specifies that it expects a user object with the properties id, name, and email. Pact will mock this response and test whether the consumer can process the data correctly.

Writing Provider Verification Tests (Node.js Backend)

Once the contract is defined by the consumer, the next step is to verify that the backend adheres to it. Pact automatically creates a contract file, which you can then use in the provider tests to ensure that the backend matches the contract.

Here’s an example of how to verify the contract on the Node.js backend:

const { Verifier } = require("@pact-foundation/pact");
const app = require("../server"); // The Express.js server

describe("Pact Verification", () => {
  it("should validate the expectations of the React frontend", async () => {
    const opts = {
      providerBaseUrl: "http://localhost:3000", // The Node.js backend
      pactUrls: [
        path.resolve(__dirname, "../pacts/reactfrontend-nodebackend.json"),
      ], // Pact file generated by consumer
    };

    await new Verifier(opts).verifyProvider();
  });
});

This test verifies that the Node.js backend responds to the /users/:id API in a manner that matches the contract defined by the React frontend.

Integrating Pact Tests Into Your CI/CD Pipeline

To ensure that contract tests are always run whenever code changes are made, it's essential to integrate them into your CI/CD pipeline. This guarantees that breaking changes are caught before they are deployed to production.

In your pipeline, you can add steps to:

  1. Run consumer tests to generate the Pact file.
  2. Publish the Pact file to a Pact broker, a service that stores and manages contracts between consumers and providers.
  3. Run provider verification tests against the published contract to ensure that the backend adheres to the consumer’s expectations.

For example, in a CI pipeline using Jenkins or GitHub Actions, you can add the following steps:

# Run consumer tests to generate Pact file
npm run test:consumer

# Publish Pact file to Pact broker
pact-broker publish ./pacts --consumer-app-version ${GIT_COMMIT}

# Run provider tests to verify the contract
npm run test:provider

By automating these tests, you can catch breaking changes early, ensuring that the consumer-provider relationship remains stable even as your application evolves.

Best Practices for Contract Testing with Pact

Here are a few best practices to follow when implementing Pact for contract testing in MERN stack applications:

  1. Use Consumer-Driven Contracts
    Make sure that the contract reflects the needs of the consumer, rather than the provider. This ensures that the API delivers only what the consumer requires, leading to cleaner and more efficient communication between services.

  2. Version Your Contracts
    As your APIs evolve, versioning becomes essential to avoid breaking existing consumers. By versioning your APIs and contracts, you allow the provider to introduce changes without affecting consumers that rely on older versions.

  3. Run Contract Tests in CI/CD
    Always automate contract tests in your CI/CD pipeline. This guarantees that any breaking changes are identified early, reducing the risk of bugs and service outages in production environments.

Conclusion: Strengthening MERN Stack Applications with Pact

Contract testing with Pact is a powerful technique for ensuring stable and reliable communication between services in a MERN stack application. By allowing the consumer to define the contract and automating the verification process, you can prevent breaking changes and improve the overall resilience of your application.

Whether you’re building a small application or a large-scale microservices architecture, implementing Pact for contract testing ensures that both the React frontend and Node.js backend evolve independently while maintaining compatibility. Follow the best practices, automate your tests, and you’ll have a robust and scalable development process that minimizes the risk of API failures.

By embracing contract testing with Pact, you’ll not only ensure better reliability but also accelerate your development process by catching issues before they become costly in production.

Refrences