Как я могу сделать шутник в этой функции в React Axios? - PullRequest
Новая
       42

Как я могу сделать шутник в этой функции в React Axios?

0 голосов
/ 19 марта 2019

Ребята, я создал сервис в React, и мне нужно протестировать эту часть сервиса, для этого я использую axios и Jest.У меня есть следующий код в React: 

import axios from 'axios';
import Endpoints from './endpoints';
const baseUrl = Endpoints.getBackendEndpoint();

export const validateName =  (nameObject, callback) => {
 axios.post(`${baseUrl}/validateName`, {...nameObject})
   .then(response =>{ 
      response.data
    })
   .then(data => callback(data));
};

Мне не нужно возвращать обещание, потому что вся работа выполняется функцией callback().

Это код, который у меня есть в Jest: 

mport moxios from 'moxios';
import * as service from '../service';
import mockResponses from './service.test.json';
import Endpoints from '../endpoints';


const validateObjName = {
    Id: 1,
    Name: 'Bob',
  }

beforeEach(() => {
const baseUrl = Endpoints.getBackendEndpoint();
  moxios.stubRequest(
    `${baseUrl}/validateName`,
    { ...validateObjName },
    {
      status: 200,
      response: mockResponses.validateForm,
    }
  );
});

afterEach(() => {
  moxios.uninstall();
});

it('validateName()', () => {
   service.validateName(validateObjName, jest.fn());
});

Это работает, но все равно нужно увеличить охват филиала.

Спасибо за помощь, ребята: D

1 Ответ

0 голосов
/ 19 марта 2019

Чтобы получить покрытие кода, код должен запускаться во время выполнения теста , поэтому вы захотите вернуть Promise, чтобы вы могли await его в своем тесте, чтобы выполнялись обратные вызовы then во время теста .

Также вы можете упростить validateName до этого: 

import axios from 'axios';
import Endpoints from './endpoints';
const baseUrl = Endpoints.getBackendEndpoint();

export const validateName = (nameObject, callback) => {
  return axios.post(`${baseUrl}/validateName`, { ...nameObject })
    .then(response => callback(response.data));
};

В вашем тесте вам необходимо установить moxios в beforeEach и передайте ложный ответ в качестве второго параметра moxios.stubRequest.

Затем используйте async тестовую функцию и await Promise, возвращаемую validateName: 

import moxios from 'moxios';
import * as service from '../service';
import mockResponses from './service.test.json';
import Endpoints from '../endpoints';

const validateObjName = {
  Id: 1,
  Name: 'Bob',
}

beforeEach(() => {
  moxios.install();  // install moxios
  const baseUrl = Endpoints.getBackendEndpoint();
  moxios.stubRequest(
    `${baseUrl}/validateName`,
    {
      status: 200,
      response: mockResponses.validateForm
    }
  );  // response is the second argument
});

afterEach(() => {
  moxios.uninstall();
});

it('validateName()', () => {
  service.validateName(validateObjName, jest.fn());
});

it('validateName()', async () => {  // use an async test function
  const spy = jest.fn();
  await service.validateName(validateObjName, spy);  // await the Promise
  expect(spy).toHaveBeenCalledWith(mockResponses.validateForm);  // Success!
});

Это должно дать вам рабочий тест и 100% покрытие кода.

...