測試拒絕 axios 承諾

Question

我想弄清楚如何正確地模擬這段代碼。 我已經想出了如何模擬成功，但我不知道如何模擬 catch/reject 塊。

應用代碼：

function getData(url = '') {
  return new Promise((resolve, reject) => {
    axios
      .get(`${baseURL}${url}`)
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

在測試中我有：

import axios from 'axios';
const MockAdapter = require('axios-moc-adapter');

describe('getData', () => {
  it('test success', async () => {
    const mock = new MockAdapter(axios);

    mock.onGet(`${service.baseURL}/sites`).reply(200, 'success');
    const axiosSpy = jest.spyOn(axios, 'get');

    const rtn = await service.getData('/sites');

    expect(axiosSpy).toHaveBeenCalled();
    expect(rtn).toBe('success');
  });
  it('test failure', async () => {
    const mock = new MockAdapter(axios);

    mock.onGet(`${service.baseURL}/sites`).networkError();
    const rtn = await service.getData('/sites').catch((err) => {
      expect(err.message).toBe('message');
    });
    expect(rtn).toBe(undefined);
  });
});

測試成功測試有效，但是當我測試失敗時，我得到：

    Expected: "message"
    Received: "Cannot read properties of undefined (reading 'then')"

      29 |     mock.onGet(`${service.baseURL}/sites`).networkError();
      30 |     const rtn = await service.getData('/sites').catch((err) => {
    > 31 |       expect(err.message).toBe('message');
         |                           ^
      32 |     });
      33 |     expect(rtn).toBe(undefined);
      34 |   });

如何編寫一個成功通過失敗案例的測試？ 具體來說，我可以通過不檢查 catch 塊內部來使此測試通過，但是當我運行覆蓋率時，它不會覆蓋 App 代碼中的 catch 塊。 我怎樣才能正確地覆蓋這條線？

Answer 1

無法重現您的問題，但.networkError()將引發錯誤，並顯示'Network Error'消息而不是'message' ，請參閱源代碼index.js#L141

service.ts :

import axios from 'axios';

export const baseURL = 'http://localhost:3000/api';
export function getData(url = '') {
  return new Promise((resolve, reject) => {
    axios
      .get(`${baseURL}${url}`)
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

service.test.ts ：

import * as service from './service';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

describe('getData', () => {
  it('test success', async () => {
    const mock = new MockAdapter(axios);

    mock.onGet(`${service.baseURL}/sites`).reply(200, 'success');
    const axiosSpy = jest.spyOn(axios, 'get');

    const rtn = await service.getData('/sites');

    expect(axiosSpy).toHaveBeenCalled();
    expect(rtn).toBe('success');
  });
  it('test failure', async () => {
    const mock = new MockAdapter(axios);
    mock.onGet(`${service.baseURL}/sites`).networkError();
    const rtn = await service.getData('/sites').catch((err) => {
      expect(err.message).toBe('Network Error');
    });
    expect(rtn).toBe(undefined);
  });
  it('test failure 2', async () => {
    const mock = new MockAdapter(axios);

    mock.onGet(`${service.baseURL}/sites`).networkError();
    await expect(service.getData('/sites')).rejects.toThrowError('Network Error');
  });
});

測試結果：

 PASS  examples/69947398/service.test.ts (8.89 s)
  getData
    ✓ test success (5 ms)
    ✓ test failure (1 ms)
    ✓ test failure 2 (2 ms)

------------|---------|----------|---------|---------|-------------------
File        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------|---------|----------|---------|---------|-------------------
All files   |     100 |        0 |     100 |     100 |                   
 service.ts |     100 |        0 |     100 |     100 | 4                 
------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        9.52 s