Реагировать на тестирование ios получить запрос в componentDidMount, используя jest

Question

Я новичок в тестировании React и пытаюсь проверить запрос на получение, исходящий от внутреннего вызова, используя ax ios.

Компонент:

class ParentComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            stockData: [],
        }
    }

    componentDidMount() {
        axios.get("http://localhost:8080/stocks")
            .then(response => {
                this.setState({

                    stockData: response.data

                })
            })
    }

     render() {

        return (
            <ChildComponent stockData={this.state.stockData}/>
        )
    }

 }

данные, извлеченные из вызова, выглядят примерно так:

stockData: [
            {
                "ticker": "AAPL",
                "name": "Apple Inc",
                "priceChanges": {
                    "daily": 1.55,
                    "weekly": -3.55,
                    "monthly": -20.00
                },
                "financialData": {   
                    "roa": 5.74,
                    "roe": 20.07,
                    "market_cap": "1.2T"
                }
            },
            {
                "ticker": "MSFT",
                "name": "Microsoft Corporation",
                "priceChanges": {
                    "daily": 4.35,
                    "weekly": 1.25,
                    "monthly": -22.05
                },
                "financialData": {   
                    "roa": 8.73,
                    "roe": 15.07,
                    "market_cap": "1.3T"
                }
            }
            //and many other similar objects
        ]

Я прочитал, что на самом деле не следует использовать реальный запрос get, а вместо этого использовать некоторые «фиктивные» данные, но не знаю, как реализовать это. Я попробовал следующее, но я не уверен, что это правильный способ сделать это. Также я получаю сообщение об ошибке: TypeError: Cannot read property 'then' of undefined

      test('should fetch company', () => {
      const wrapper = shallow(<ParentComponent/>);
      const resp = {stockData: [
                {
                    "ticker": "AAPL",
                    "name": "Apple Inc",
                    "priceChanges": {
                        "daily": 1.55,
                        "weekly": -3.55,
                        "monthly": -20.00
                    },
                    "financialData": {   
                        "roa": 5.74,
                        "roe": 20.07,
                        "market_cap": "1.2T"
                    }
                }
             };


      wrapper.instance().componentDidMount().then(resp => {
         expect(wrapper.state('stockData')).toContain(resp.stockData);
      });

    }); 

Answer 1

Вы можете использовать jest.spyOn (object, methodName) , чтобы смоделировать axios.get метод и его разрешенное значение. Поскольку axios.get является асинхронной операцией, нам нужно дождаться ее завершения.

Например

parent.jsx:

import React from 'react';
import { ChildComponent } from './child';
import axios from 'axios';

export class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stockData: [],
    };
  }

  componentDidMount() {
    axios.get('http://localhost:8080/stocks').then((response) => {
      this.setState({ stockData: response.data });
    });
  }

  render() {
    return <ChildComponent stockData={this.state.stockData} />;
  }
}

child.jsx:

import React, { Component } from 'react';

export class ChildComponent extends Component {
  render() {
    return <div></div>;
  }
}

parent.test.jsx:

import { ParentComponent } from './parent';
import { shallow } from 'enzyme';
import axios from 'axios';
import React from 'react';
import { act } from 'react-dom/test-utils';

const whenStable = async () => {
  await act(async () => {
    await new Promise((resolve) => setTimeout(resolve, 0));
  });
};

describe('61465031', () => {
  it('should pass', async () => {
    const mResponse = { data: ['a', 'b'] };
    const getSpy = jest.spyOn(axios, 'get').mockResolvedValueOnce(mResponse);
    const wrapper = shallow(<ParentComponent></ParentComponent>);
    await whenStable();
    expect(wrapper.find('ChildComponent').prop('stockData')).toEqual(['a', 'b']);
    getSpy.mockRestore();
  });
});

Результаты модульных испытаний с отчетом о покрытии:

 PASS  stackoverflow/61465031/parent.test.jsx (11.345s)
  61465031
    ✓ should pass (20ms)

------------|---------|----------|---------|---------|-------------------
File        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------|---------|----------|---------|---------|-------------------
All files   |   95.45 |      100 |   85.71 |   94.12 |                   
 child.jsx  |   85.71 |      100 |      50 |      80 | 5                 
 parent.jsx |     100 |      100 |     100 |     100 |                   
------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        12.876s

Исходный код: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/61465031