Почему мой макет моего API возвращает ошибку 404? - PullRequest
Новая
       30

Почему мой макет моего API возвращает ошибку 404?

8 голосов
/ 26 марта 2019

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

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

Макет 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, поэтому он не издевается над моим API конечной точки (Другие работы).
Функция Utils.getAuth() возвращает заголовок с токеном авторизации.

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

Относительно содержимого отправляемых данных (первый - перед тестовым вызовом с mock, второй - в тестируемой функции, а журнал данных - это данные, отправляемые в 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")}});

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

Решение

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

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

* С axios-mock-adapter

Ответы [ 2 ]

4 голосов
/ 28 марта 2019

Хорошо, второй раунд.

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

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

Кроме того, из-за характера тестов asynchronous вы не должны включать тесты unit и integration в один файл теста. Так как тесты asynchronous, вызов mockAxios.reset() или 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)

Рабочий пример ваших кодов и ящика : https://codesandbox.io/s/526pj28n1n

2 голосов
/ 29 марта 2019

Хорошо, это было сложно. Проблема в пакете 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 .

Примером такого является: пост-тест

...