Using Mock and Unmock Together: How to Effectively Combine Them

[ademyalcin27]

I want to use unmock(vi.unmock("vee-validate");) in some of my tests, similar to the example below, but I want to ensure that it doesn't affect other tests where I am using mock. Currently, using unmock in one test affects other tests as well. How can I prevent this?

import { describe, it, expect, type MockedFunction } from "vitest";
import { mountSuspended, renderSuspended } from "@nuxt/test-utils/runtime";
import { fireEvent, screen } from "@testing-library/vue";
import { useField, type FieldContext, type FieldMeta } from "vee-validate";
import CheckboxComponent from "@/components/Base/Checkbox/Checkbox.vue";

const mockRandomUUID = vi.fn().mockReturnValue("mocked-id");
global.crypto.randomUUID = mockRandomUUID;

vi.mock("vee-validate", () => ({
	useField: vi.fn((overrides) => mockFormField(overrides)),
}));
interface MockParams<TValue> extends Omit<FieldContext<TValue>, "meta"> {
	meta: Partial<FieldMeta<TValue>>;
}

function mockFormField<TValue = unknown>(
	overrides: Partial<MockParams<TValue>> = {}
) {
	const { meta: metaOverrides = {}, ...restOverrides } = overrides;
	return {
		value: ref(false),
		...restOverrides,
	};
}

const mockeduseField = vi.mocked(useField) as MockedFunction<typeof useField>;

describe("CheckboxComponent", () => {
	const defaultProps = {
		modelValue: false,
		value: false,
	};
	afterEach(() => {
		vi.clearAllMocks();
	});

	it("Should render checkbox component", async () => {
		const wrapper = await renderSuspended(CheckboxComponent, {
			props: { ...defaultProps, label: "Test Checkbox" },
		});

		const checkbox = screen.getByRole("checkbox");
		const label = screen.getByText("Test Checkbox");
		const icon = screen.getByTestId(`svgo-tick`);

		expect(checkbox).toBeTruthy();
		expect(label).toBeTruthy();
		expect(icon).toBeTruthy();
		expect(wrapper.html()).toMatchSnapshot();
	});


	describe("renders with model value", () => {
		it("emits update:modelValue with the correct value when checkbox toggled", async () => {
			vi.unmock("vee-validate");
			const wrapper = await renderSuspended(CheckboxComponent, {
				props: {
					modelValue: true,
					value: true,
				},
			});

			const checkbox = screen.getByRole("checkbox") as HTMLInputElement;
			expect(checkbox.checked).toBe(true);
			await fireEvent.change(checkbox);
			expect(wrapper.emitted()["update:modelValue"][0]).toEqual([false]);
		});

	});

	describe("validation of checkbox", () => {
		it("should give error message when disabled validation is false", async () => {
			const customMockValues = mockFormField({
				meta: {
					valid: true,
					touched: true,
				},
				errorMessage: ref("Error message"),
			});
			mockeduseField.mockReturnValueOnce(customMockValues);

			await renderSuspended(CheckboxComponent, {
				props: {
					...defaultProps,
					isCustomValid: true,
				},
			});
			const checkmark = screen.getByTestId("checkbox-checkmark");
			expect(checkmark.classList).toContain(
				"checkbox-wrapper__checkmark--invalid"
			);
			expect(screen.queryByTestId("checkbox-error")).toBeTruthy();
			expect(screen.getByText("Error message")).toBeTruthy();
		});


	});
});

[sheremet-va]

Both vi.mock and vi.unmock are hoisted to the top of the file so it doesn't make sense to use both of them in the same file. If you need to unmock a module in a specific test, you need to call vi.doUnmock and import the file again.

[ademyalcin27]

but sometimes I need to use it without unmock. if I use doUnmock its not hoisted, so Its not working before render component. is there a better approach like to use vi.spyOn