如何在React axios中对此函数进行一次开玩笑测试？

Question

我们在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));
};

我不需要返回promise，因为所有的工作都是通过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

Answer 1

为了获得代码覆盖率，必须在测试运行时运行代码，因此您将需要返回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 validateName返回的Promise ：

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％的代码覆盖率。