Jest mocked object only for one test

Question

I have mocked an object (in my case the quizData), but it should only mocked for one Test. How can I achieve this?

My code looks like this so far:

import {fireEvent, render, screen} from '@testing-library/react';
import App from "./App.tsx";

jest.mock("./QuizData", () => ({
    __esModule: true,
    quizData: [{
        id: 1,
        question: 'What is the capital of France?',
        answers: ['Paris', 'London', 'Berlin', 'Madrid'],
        correctAnswer: 'Paris',
    },]
}));

describe('Test the App Component', () => {

    it('checkAnswer updates score and user answers correctly', () => {
        render(<App/>);
        const startButton = screen.getByRole('startButton');
        fireEvent.click(startButton);
        const answerButton = screen.getByText("Paris");
        fireEvent.click(answerButton);
        expect(screen.getByText("Score: 100")).toBeInTheDocument();
    });

    // Test that don't work with mock ???
    it('Test the next button', () => {
        render(<App/>);
        const startButton = screen.getByRole('startButton');
        fireEvent.click(startButton);
        const nextButton = screen.getByRole('nextButton');
        fireEvent.click(nextButton);
        expect(screen.getByText("Question: 2 / 10")).toBeInTheDocument();
    })
});

I have already tried a lot with unmock and mockReturnValue. Unfortunately, none of this worked.

Answer 1

Mocking constants is a bit tricky, so why not make your code more testable (which is usually a noble goal anyway, that can improve code quality) by instead having QuizData export a function that returns the data.

export const getQuizData => ({  }) // Put your data in the return obkect

In your codebase, you will now need to call this method instead of assuming you already have the constant.

Then you can mock it using spies in your tests like so:

import * as quizData from "./QuizData"
import { fireEvent, render, screen } from "@testing-library/react"
import App from "./App.tsx"

describe("Test the App Component", () => {
  afterEach(() => {
    jest.restoreAllMocks()
  })

  // Mock is for this test only
  it("checkAnswer updates score and user answers correctly", () => {
    const mock = jest.spyon(quizData, "getQuizData")
    mock.mockReturnValue([
      {
        id: 1,
        question: "What is the capital of France?",
        answers: ["Paris", "London", "Berlin", "Madrid"],
        correctAnswer: "Paris",
      },
    ])
    render(<App />)
    const startButton = screen.getByRole("startButton")
    fireEvent.click(startButton)
    const answerButton = screen.getByText("Paris")
    fireEvent.click(answerButton)
    expect(screen.getByText("Score: 100")).toBeInTheDocument()
  })

  // Now uses original implementation since the mock was reset in afterEach
  it("Test the next button", () => {
    render(<App />)
    const startButton = screen.getByRole("startButton")
    fireEvent.click(startButton)
    const nextButton = screen.getByRole("nextButton")
    fireEvent.click(nextButton)
    expect(screen.getByText("Question: 2 / 10")).toBeInTheDocument()
  })
})

If you really don't want to change to a function see this answer. However, I strongly recommend just making your code more testable like above.