開玩笑地測試ComponentDidMount的axios

Question

我正在嘗試為axios請求編寫一個Jest測試。 axios請求位於componentDidMount生命周期方法內部，我不知道如何獲取它。

陣營：

class MyComponent extends Component {

    componentDidMount(){
        axios
            .get('https://jsonplaceholder.typicode.com/users')
            .then(res => res.data)
            .catch(err => 'catch error')
    }

    render() {
        return (null);
    }
}

export default MyComponent;

測試：

import MyComponent from './components/MyComponent';

test('Axios is working', () => {
  return MyComponent.prototype.componentDidMount().then(data => {
    expect(data).toBeDefined;
  });
});

測試時出現錯誤：

TypeError：無法讀取未定義的屬性“ then”。

所以

MyComponent.prototype.componentDidMount（）

不管用。

所以我的最后一個問題是- 如何定義componentDidMount來測試其中的axios請求 ？

非常感謝您的回答。

Answer 1

這是一個解決方案：

index.tsx ：

import { Component } from 'react';
import axios from 'axios';

class MyComponent extends Component {
  public async componentDidMount() {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then(res => res.data)
      .catch(err => 'catch error');
  }

  public render() {
    return null;
  }
}

export default MyComponent;

單元測試：

import MyComponent from './';
import axios from 'axios';

jest.mock('axios');

axios.get = jest.fn();

describe('MyComponent', () => {
  describe('test with jestjs', () => {
    it('componentDidMount - 1', async () => {
      (axios.get as jest.MockedFunction<typeof axios.get>).mockResolvedValueOnce({ data: 'mocked data' });
      await MyComponent.prototype.componentDidMount();
      expect(axios.get).toBeCalledWith('https://jsonplaceholder.typicode.com/users');
    });

    it('componentDidMount - 2', async () => {
      (axios.get as jest.MockedFunction<typeof axios.get>).mockRejectedValueOnce(new Error('some error'));
      const actualValue = await MyComponent.prototype.componentDidMount();
      expect(axios.get).toBeCalledWith('https://jsonplaceholder.typicode.com/users');
    });

    it('render', () => {
      expect(MyComponent.prototype.render()).toEqual(null);
    });
  });
});

單元測試結果覆蓋率100％：

 PASS  src/stackoverflow/54794512/index.spec.tsx
  MyComponent
    test with jestjs
      ✓ componentDidMount - 1 (6ms)
      ✓ componentDidMount - 2 (1ms)
      ✓ render (1ms)

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

這是完整的演示： https : //github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/54794512