Имитация вызовов API с авторизацией с помощью JEST

У меня есть функция вызова 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.info(`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 | });

Как мне издеваться над шуткой, чтобы вставить токен для sessionStorage?

Если я удалю заголовки или установлю Bearer ${'123123'} в AdminTable.js файле, тест не будет иметь проблем.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел решение! Проблема в том, что sessionStorage доступен только при работе в браузере. Все, что мне нужно, это издеваться над sessionStorage в моем тестовом файле. Вы делаете это:

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

Другие вопросы по теме