测试NavBar组件登出按钮时遇[Function clear]非间谍函数错误求助

你遇到的错误是因为没有将localStorage.clear包装成vitest的spy函数，直接断言它的调用情况时，vitest无法识别这个原生方法的调用记录。

修复步骤： #

• 在测试用例中，先通过vi.spyOn监听localStorage.clear方法，将其转为可追踪的spy
• 测试完成后建议恢复原方法，避免影响其他测试用例
• 断言时使用创建的spy对象，而非原生的localStorage.clear

修改后的完整测试代码： #

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import NavBar from "../components/NavBar";
import { vi, test, describe, expect } from "vitest";

describe("NavBar component", () => {
  test("render the navBar correctly", () => {
    const setTokenMock = vi.fn();
    render(<NavBar setToken={setTokenMock} />);
  });

  test("Log out if log out button is clicked", () => {
    const setTokenMock = vi.fn();
    // 创建localStorage.clear的spy
    const clearSpy = vi.spyOn(localStorage, 'clear');

    const { getByText } = render(<NavBar setToken={setTokenMock} />);

    fireEvent.click(getByText("Déconnexion"));

    expect(setTokenMock).toHaveBeenCalledWith("");
    // 使用spy对象断言调用情况
    expect(clearSpy).toHaveBeenCalled();

    // 恢复原方法（可选，推荐）
    clearSpy.mockRestore();
  });
});

内容的提问来源于stack exchange，提问作者fifietcie