This short blog post describes how to use Jest to mock nanoid. The nanoid function generates a unique string id. I used it to generate an id for an object. However, I wanted a stable id when unit testing the code. To accomplish this, I mocked the nanoid module and function by doing the following:
jest.mock("nanoid", () => { return { nanoid: () => "1234" }; }); The above code does the following:
-
jest.mock("nanoid"...)- This part mocks the nanoid module. -
return { nanoid: () => "1234" };- This part mocks the nanoid function. "1234" is returned when the nanoid function is called.
Below, is a simple example of a React app using the nanoid function and a unit test mocking it.
App.js
import { nanoid } from "nanoid"; class Item { constructor(name, price) { this.id = nanoid(); //use nanoid to generate a unique id this.name = name; this.price = price; } } function Display({ item }) { return ( <div> <h2>Item</h2> <p>id: {item.id}</p> <p>name: {item.name}</p> <p>price: {item.price}</p> </div> ); } function App() { const item = new Item("apple", 2); return ( <div className="App"> <h1>Nanoid Unit Test Example</h1> <Display item={item} /> </div> ); } export default App; export { Display, Item }; App.test.js
import { render, screen } from "@testing-library/react"; import { Display, Item } from "./App"; jest.mock("nanoid", () => { return { nanoid: () => "1234" }; }); describe("test the Display", () => { it("should display the item info", () => { let item = new Item("Orange", 5); render(<Display item={item} />); expect(screen.getByText(/id: 1234/i)).toBeInTheDocument(); expect(screen.getByText(/name: Orange/i)).toBeInTheDocument(); expect(screen.getByText(/price: 5/i)).toBeInTheDocument(); }); }); Note: As of this writing CodeSandbox does not support Jest mocks.
Top comments (0)