DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Akira Kashihara
Akira Kashihara

Posted on • Updated on

How to mock node-fetch with Vitest

What I Want to Do

I want to mock node-fetch with Vitest, which is a unit-test framework. Jest introduces how to make a node-fetch mock.

Bypassing module mocks ยท Jest

Jest allows you to mock out whole modules in your tests, which can be useful for testing if your code is calling functions from that module correctly. However, sometimes you may want to use parts of a mocked module in your test file, in which case you want to access the original implementation, rather than a mocked version.

favicon jestjs.io

Vitest is compatible with Jest in large part, but Vitest does not provide jest.requireActual helper is used in the above-linked article.
This article introduces how to mock node-fetch without using jest.requireActual by using Vitest.

Required Environment

  • Node.js

Adding Necessary Dependencies

Vitest has not been common yet (at least in Japan), so I indicate how to install necessary dependencies.

npm i -D vitest vi-fetch node-fetch
Enter fullscreen mode Exit fullscreen mode

The Function I test

I made a simple function for testing. This function returns the count value of JSON on the response to access https://hogehoge.hogehoge.hogehoge with the GET method.

import fetch from "node-fetch";

export const getCountNode = async () => {
  const response = await fetch("https://hogehoge.hogehoge.hogehoge"); // GET
  const countJson = await response.json(); // Get response body as json
  return countJson.count; // Return the value of count key in the response
};
Enter fullscreen mode Exit fullscreen mode

Writing Testing Code

As I mentioned before, Vitest does not provide jest.requireActual helper, so I implemented the following source code in reference to the answer written by E. Coleman et al. on stack overflow.

import { describe, it, expect, vi } from "vitest";
import fetch from "node-fetch";
import { getCountNode } from "./getCountNode";

describe("sample", () => {
  it("hello", async () => {
    vi.mock("node-fetch");
    fetch.mockReturnValue(
      Promise.resolve({ json: () => Promise.resolve({ count: 33 }) })
    );
    const result = await getCountNode();
    expect(result).toBe(33);
  });
});
Enter fullscreen mode Exit fullscreen mode

Testing

The result of this testing is shown in the following. This result indicates "2 passed" because I ran another test simultaneously.

passed

Failed Testing Result

I modified the expected value in the testing. This testing failed.

import { describe, it, expect, vi } from "vitest";
import fetch from "node-fetch";
import { getCountNode } from "./getCountNode";

describe("sample", () => {
  it("hello", async () => {
    vi.mock("node-fetch");
    fetch.mockReturnValue(
      Promise.resolve({ json: () => Promise.resolve({ count: 33 }) })
    );
    const result = await getCountNode();
    expect(result).toBe(31);
  });
});
Enter fullscreen mode Exit fullscreen mode

This result is the following.

Image description

Annotation

This article is originally written in Japanese.

Top comments (0)

Classic DEV Post from 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!