axios 使用JEST通过授权模拟API调用

8nuwlpux  于 2023-04-30  发布在  iOS
关注(0)|答案(1)|浏览(232)

我有一个API调用函数,从我的后端检索数据显示。我的API调用作为检索数据时授权所需的标头。会话存储在应用程序运行时在登录时设置。
我的主要代码是这样的:

AdminTable.js
export const ADMIN_URL = '/admin_management/list/';

export const fetchAdmin = async () => {
  try {
    const response = await axios.post(
      ADMIN_URL,
      {},
      {
        headers: { Authorization: `Bearer ${sessionStorage.getItem('access_token')}` },
      }
    );
    return response.data.results;
  } catch (err) {
    console.log(`Error: ${err.message}`);
  }
};

我的测试代码是:

AdminTable.test.js
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', () => {
  afterEach(jest.clearAllMocks);
  it('return correct data', async () => {
    const result = await fetchAdmin();
    expect(result).toMatch('Mock Jedi');
    expect(axios.post).toHaveBeenCalledTimes(1);
  });
});

当我运行测试时,我得到这个错误:

Expected substring: "Mock Jedi"
    Received string:    "sessionStorage is not defined"

    > 19 |     expect(result).toMatch('Mock Jedi');
         |                    ^
      20 |     expect(axios.post).toHaveBeenCalledTimes(1);
      21 |   });
      22 | });

我如何模拟jest来插入sessionStorage的令牌?
如果我删除头文件或在AdminTable.js文件中设置Bearer ${'123123'},则测试没有问题。

wooyq4lh

wooyq4lh1#

我找到解决办法了!问题是sessionStorage仅在浏览器上运行时可用。我所需要做的就是在我的测试文件中模拟一个sessionStorage。您可以通过以下方式实现此目的:

global.sessionStorage = {
  getItem: jest.fn(() => 'test token'),
};

相关问题