Question 192572 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Jest mocked object only for one test

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.

Tags:

2

Answers


  1. 0

    You just have to define a generic mock and then define the single mock implementations with mockImplementation()

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

jest.mock("./QuizData");

import QuizData from './QuizData';

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

    it('checkAnswer updates score and user answers correctly', () => {
        mockQuiz.mockImplementation(() => ({
            __esModule: true,
            quizData: [{
               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();
    });

    //... other tests
});
    Login or Signup to reply.
  2. 0

    Well, you can split your file in two different testing files, to have the mock in the file you want it , so something like:

    // First file, with mock

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();
    });
});

// Second file, no mock

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

describe('Test the App Component', () => {
    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();
    })
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search