React Unit Testing using Vitest

import { expect, describe, it, vi, beforeEach, afterEach } from "vitest";
import * as ApiHelper from "./Api.helpers";

// Here we need to import these in every test file, but there is a provision to do it in global level

//lets say we want to spy some API calls
 spyGetAllCategory = vi
        .spyOn(ApiHelper, "getAllCategory")
        .mockResolvedValue([
          {
            id: "12",
            name: "asda",
          },
        ]);

      spyGetQuestions = vi.spyOn(ApiHelper, "getQuestions").mockResolvedValue([
        {
          type: "my",
          difficulty: "easy",
          category: "common",
          question: "How are you ?",
          correct_answer: "C",
          incorrect_answers: ["A", "B", "D"],
        },
      ]);
    });

    afterEach(() => {
      vi.restoreAllMocks();
    });

// how to test it
 it("getQuestions", async () => {
      await ApiHelper.getQuestions({ category: "simple", difficulty: "easy" });
      expect(spyGetQuestions).toHaveBeenCalledOnce();
      expect(spyGetQuestions).toHaveResolvedWith([
        {
          type: "my",
          difficulty: "easy",
          category: "common",
          question: "How are you ?",
          correct_answer: "C",
          incorrect_answers: ["A", "B", "D"],
        },
      ]);
    });

 describe("getDynamicOptions", () => {
    it("getDynamicOptions, Only checking the Length", () => {
      const arr = ["ABC", "DEF", "IJK", "XYZ"];
      expect(getDynamicOptions(arr).length).toBe(4);
    });

    it.fails("getDynamicOptions, Here it would fail", () => {
      const arr = ["ABC", "DEF", "IJK", "XYZ"];
      expect(getDynamicOptions(arr)).toEqual(["ABC", "DEF", "IJK", "XYZ"]);
    });
  });

describe("updateResponseWithIds", () => {
    it("updateResponseWithIds should have correctAnswerId", () => {
      const questions = {
        type: "abc",
        difficulty: "easy",
        category: "film",
        question: "Hey there, How are you ?",
        correct_answer: "B",
        incorrect_answers: ["A", "D", "C"],
        id: "easy_0",
        renderOption: ["A", "D", "B", "C"],
      };
      const dataSet = {
        response: "ABC",
        responseId: "easy_0",
      };
      expect(
        updateResponseWithIds(questions, dataSet)["easy_0"]
      ).toContainEqual({
        correctAnswerId: "RESPONSE_easy_0_2",
        correct_answer: "B",
        userAnswerId: "easy_0",
        user_answer: "ABC",
      });
    });
  });

test('toMatchObject example', () => {
  const received = { a: 1, b: 2, c: 3 };
  expect(received).toMatchObject({ a: 1, b: 2 });
});
//In this example, the test will pass because received object has at least the properties { a: 1, b: 2 }.

test('toContainEqual example', () => {
  const received = [{ a: 1, b: 2 }, { a: 2, b: 1 }];
  expect(received).toContainEqual({ a: 1, b: 2 });
});
//In this example, the test will pass because received array contains an object that equals { a: 1, b: 2 }.

import { mock } from 'vitest'

mock('./module-to-mock', {
  mockedFunction: () => 'mocked value',
})

import { fn } from 'vitest'

const mockFunction = fn(() => 'mocked value')

import { spyOn } from 'vitest'

import * as objectToSpyOn from './random.utils.js

spyOn(objectToSpyOn, 'methodToSpyOn').mockImplementation(() => 'mocked value')

// after that we need to restore it
 vi.restoreAllMocks();