Блог

Я использую axios-mock-adapter для создания макета моего API, он работает корректно, но в одном макете он возвращает ошибку 404, и я не могу найти, почему.

Здесь есть песочница с тестом, вы можете увидеть, когда мы запустим тест, вторая проверка не удалась, потому что axios POST вызов не был макетом. Я попытался удалить часть заголовка, но в песочнице произошел сбой, когда я запустил test.

Макет API (тестовая часть):

 import axios from "axios";
import MockAdapter from 'axios-mock-adapter';
import Utils from "../Utils/Utils";

// Global variable for post request with axios
global.users_post = axios.create({
  baseURL: "http://localhost:5000/api/",
  headers: {'Content-Type': 'application/json'}
});

/* Mockup API */
var userMock = new MockAdapter(users_post);

const user_resp_full = {
  data: {
    first_name: "Test",
    last_name: "Test",
    email: "test@gmail.com",
    address: "Test",
    zipcode: 1010,
    city: "Test",
    admin: false
  }
}

const testAPI = () => {
    userMock
      .onPost("users", user_resp_full, Utils.getAuth())
      .reply(200, {data: {status: "success"}});
}

test("something", async () => {
  let tree = shallow(<UserManage type="create" uuid="" />);
  testAPI();
  await flushPromises();
  // Some test

  tree.find("#confirm-create").simulate("click");
  await flushPromises();
  // Error 404, mock isn't trigger
})
  

Я уже проверил, данные те же, то же самое для конечной точки, но, похоже, это неправильно издевается.

Вызов Axios в классе:

 function (fields) {
    users_post.post("users", fields, Utils.getAuth())
    .then(resp => {
      let data = resp.data;
      // Do something
    })
    .catch(resp => {
      let data = resp.response.data;
      // Display error
    });
}
  

На данный момент в моем тесте Jest он возвращает ошибку 404, поэтому он не имитировал мой endpoint API (другие работы).
Utils.getAuth() Функция возвращает заголовок с токеном аутентификации.

Отправка данных

Это касается содержимого отправляемых данных (первое — перед тестовым вызовом с макетом, второе — в тестируемой функции, а журнал данных — это данные, отправляемые в api):

 console.log src/tests/UserManage.test.js:222
  POST USER 2
{"first_name":"Test","last_name":"Test","email":"test@gmail.com","address":"Test","zipcode":1010,"city":"Test","admin":false}
console.log src/Components/Users/UserManage.js:152
  POST USER
console.log src/Components/Users/UserManage.js:153
{"first_name":"Test","last_name":"Test","email":"test@gmail.com","address":"Test","zipcode":1010,"city":"Test","admin":false}
  

Обновить

Эта ошибка возникает только тогда, когда я использую POST запрос с подобным заголовком:

 axios.post("http://localhost/api/user/update", {name: "Test"}, {headers: {"Authorization": "Bearer token")}});
  

Я вижу на тестовой странице axios-mock-adapter github, что в конечном итоге мы должны поставить headers тест без метки перед:
{headers: {Autorization: "Bearer token"}} стать {Autorization: "Bearer token"}
Но, к сожалению, это работает не лучше, чем у меня.

Решение

С ответом Мэтта Карлотты и его codesandbox я модифицирую свой с помощью 2 примеров исправленной проблемы:

• Проверка POST макета запроса с использованием axios*
• Проверка POST макета запроса с использованием экземпляра axios*

* С axios-mock-adapter

Отлично, второй раунд.

• Ваша flushPromises функция не решается promises должным образом, когда для ответа на это promise требуется некоторое время. Обходной путь заключается в том, чтобы return promise вставить await перед ним в .test.js файл. Поскольку мы используем await на promise , await flushPromises() не требуется.
• Кроме того, включение headers в onPost издевательскую функцию приведет к тому, что функция выдаст ошибку. Поскольку вы просто издеваетесь над этим запросом (а на самом деле не тестируете его интеграцию), вам не нужно их включать. Однако, поскольку вы все равно уже используете пользовательскую axios конфигурацию, вы можете просто включить headers в axiosConfig.js файл. Смотрите рабочий пример вашего codesandbox для получения дополнительной информации.

Как показано в Unit Testing codesandbox ниже, если вы попытаетесь использовать метод await flushPromises() on deleteUserDataOverTime , произойдет сбой. Сбой, потому что он не разрешил promise . Для устранения этого promise требуется некоторое время, и оно не обрабатывается должным образом.

Кроме того, из-за asynchronous характера тестов вы не должны включать unit и integration тесты в один и тот же тестовый файл. Поскольку тесты asynchronous , вызывающие mockAxios.reset() or mockAxios.restore() по тому же поддельному запросу или тому же поддельному экземпляру — для выполнения любых дополнительных реальных или поддельных вызовов API — могут и будут непреднамеренно влиять на все вызовы API (опять же, это асинхронные, а не синхронные тесты).

Рабочий пример модульного тестирования API: https://codesandbox.io/s/6z36z6pzyr (поддельный API — включает GET , PUT POST и DELETE )

Рабочий пример интеграционного тестирования API: https://codesandbox.io/s/7z93xnm206 (реальный API — включает только GET , но функциональность должна оставаться неизменной для PUT , POST и DELETE )

Рабочий пример вашего codesandbox: https://codesandbox.io/s/526pj28n1n

Хорошо, это было сложно. Проблема в пакете axios-mock-adapter. Для этого требуется экземпляр axios, использующий .create() метод. Смотрите здесь: создание экземпляра

В вашем App.js, используйте:

 import axios from "axios";
const instance = axios.create();

instance.post("http://localhost/api/user/update", {name: "Test"}, {headers: {"Authorization": "Bearer token")}});
  

Однако в тестах ничего не нужно менять.

Я получил подсказку из тестов axios-mock-adapter.

Примером такого является: post test