如何在Jest中Mock含权限验证的API调用？解决sessionStorage未定义报错

Jest运行在Node.js环境中，默认没有浏览器的sessionStorage全局对象，因此你的测试代码会抛出该错误。以下是两种可行的Mock方案：

方案1：直接Mock全局sessionStorage对象 #

在测试用例的beforeEach钩子中定义全局的sessionStorage，模拟getItem方法返回预设的token：

import { fetchAdmin } from '../pages/AdminTable';
import axios from '../api/axios';

jest.mock('../api/axios', () => ({
  post: jest.fn(),
}));
axios.post.mockResolvedValue({ data: { results: 'Mock Jedi' } });

describe('fetchAdmin', () => {
  beforeEach(() => {
    // Mock全局sessionStorage
    global.sessionStorage = {
      getItem: jest.fn(() => 'mock-access-token')
    };
  });

  afterEach(() => {
    jest.clearAllMocks();
    // 清理全局Mock，避免影响其他测试
    delete global.sessionStorage;
  });

  it('return correct data and sends authorization header', async () => {
    const result = await fetchAdmin();
    expect(result).toMatch('Mock Jedi');
    expect(axios.post).toHaveBeenCalledTimes(1);
    // 验证请求头是否正确携带了token
    expect(axios.post).toHaveBeenCalledWith(
      '/admin_management/list/',
      {},
      { headers: { Authorization: 'Bearer mock-access-token' } }
    );
  });
});

方案2：使用jest.spyOn模拟sessionStorage.getItem #

如果你想更贴近浏览器环境的模拟，可以用jest.spyOn来Mockwindow.sessionStorage.getItem：

import { fetchAdmin } from '../pages/AdminTable';
import axios from '../api/axios';

jest.mock('../api/axios', () => ({
  post: jest.fn(),
}));
axios.post.mockResolvedValue({ data: { results: 'Mock Jedi' } });

describe('fetchAdmin', () => {
  let getItemSpy;

  beforeEach(() => {
    // Mock window.sessionStorage.getItem
    getItemSpy = jest.spyOn(window.sessionStorage, 'getItem').mockReturnValue('mock-access-token');
  });

  afterEach(() => {
    jest.clearAllMocks();
    // 恢复原方法
    getItemSpy.mockRestore();
  });

  it('return correct data and sends authorization header', async () => {
    const result = await fetchAdmin();
    expect(result).toMatch('Mock Jedi');
    expect(axios.post).toHaveBeenCalledTimes(1);
    expect(getItemSpy).toHaveBeenCalledWith('access_token');
    expect(axios.post).toHaveBeenCalledWith(
      '/admin_management/list/',
      {},
      { headers: { Authorization: 'Bearer mock-access-token' } }
    );
  });
});

关键说明 #

• 两种方案都能解决sessionStorage is not defined的问题，同时可以验证请求是否正确携带了Authorization头，让测试更全面。
• 测试完成后记得清理Mock（比如delete global.sessionStorage或mockRestore()），避免对其他测试用例造成干扰。

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