我怎样才能在 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));
};

我不需要 return 承诺，因为所有工作都是由 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());
});

有效，但仍需增加 Branch 覆盖范围。

谢谢你们的帮助:D

Answer 1

为了获得代码覆盖率，代码必须运行 而测试运行ning 因此您需要 return 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));
};

在您的测试中，您需要在 beforeEach 中安装 moxios 并将模拟响应作为第二个参数传递给 moxios.stubRequest。

然后使用 async 测试函数和 await Promise return 编辑 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% 的代码覆盖率。

我怎样才能在 React axios 的这个函数中做一个玩笑测试？

How can I do a jest test in this function in React axios?

reactjs

jestjs

axios

moxios