Тестовый модуль Jest / Enzyme для запросов Axios в ComponentDidMount ()

Question

Я пытаюсь выполнить какое-то модульное тестирование моего существующего приложения реакции с Jest и Enzyme.Я совершенно новичок в этом деле и точно не знаю, как подходить к таким тестовым сценариям.Я знаю, что для проверки вызовов API-запросов мне нужно выполнить какую-то «насмешку», но как мне написать тест для этого?Какие шаги необходимо выполнить?

Ниже приведен фрагмент кода, который я хочу проверить.

Home.js

import React,{Component} from 'react'
import axios from 'axios';
import {Link} from 'react-router-dom';
import FacilityModal from '../Table/FacilityModal';

class Home extends Component {
      state = {
    cities:[],
    name:''
  }

 componentDidMount()   {   axios.get('/cities').then(res => {
       this.setState({cities:res.data})
       console.log("Oza" + JSON.stringify(res))
     });   console.log(this.state.cities)   }

   render(){

let postList = this.state.cities.map(city =>
{
  return(
      <div key = {city.id}>
      <p>
      <Link to = {'/'+city.id}>{city.name}</Link></p>
      </div>
      )
})
return(
    <div className = 'align'>All Facilities (NCAL)

<div className="hr-sect">OR</div>
   <div className = 'Modal'>
            {postList}
        </div>
<FacilityModal cityname = {this.props} />
      </div>
    )
  }

}

Answer 1

import React from 'react';
import axios from 'axios';

export default class ArticleList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      articles: []
    }
  }

  componentDidMount() {
    return axios.get('GET_ARTICLES_URL').then(response => {
      this.setState({
        articles: response.data
      });
    });
  }

  render() {
    return (
      <ul>
        {this.state.articles.map(a => <li><a href={a.url}>{a.title}</a></li>)}
      </ul>
    )
  }
}

// ---------

import React from 'react';
import { shallow } from 'enzyme';
import App from './App';

jest.mock('axios', () => {
  const exampleArticles = [
    { title: 'test article', url: 'test url' }
  ];
  
  return {
    get: jest.fn(() => Promise.resolve(exampleArticles)),
  };
});

const axios = require('axios');

it('fetch articles on #componentDidMount', () => {
  const app = shallow(<App />);
  app
    .instance()
    .componentDidMount()
    .then(() => {
      expect(axios.get).toHaveBeenCalled();
      expect(axios.get).toHaveBeenCalledWith('articles_url');
      expect(app.state()).toHaveProperty('articles', [
        { title: 'test article', url: 'test url' }
      ]);
      done();
    });
});

проверить эту статью https://binarapps.com/blog/test-ajax-calls-in-react-component-lifecycle/

Answer 2

1) Извлеките вызов API в другом методе, который возвращает обещание (например, fetchCities ()) для простоты тестирования.

2) Смоделируйте модуль узла axios с помощью Jest.См. Документы: https://jestjs.io/docs/en/mock-functions#mocking-modules

3) Используйте Enzyme, чтобы получить ссылку на ваш компонент: https://airbnb.io/enzyme/docs/api/ShallowWrapper/shallow.html

Как только это будет на месте, вы можете проверить, правильно ли установлено состояние.Например:

test('should fetch users', () => {
  const wrapper = shallow(<Home/>);
  const resp = {data: [{cities: ['NY']}]};

  axios.get.mockResolvedValue(resp);

  wrapper.instance().fetchCities().then(resp => {
     expect(wrapper.state('cities')).toEqual(resp.data.cities);
  });

}); 

Как мне улучшить этот ответ?Это не то, что я ожидаю в качестве ответа, которое является названием города.

axios.js (отдельная функция для обещания)

'use strict';
module.exports = {
  get: () => {
    return Promise.resolve({
      data: [
        {
          id: 0,
          name: 'Santa Clara'
        },
        {
          id: 1,
          name: 'Fremont'
        }
      ]
    });
  }
};

Home.test.js (фактический тестовый файл)

import React from 'react';
import { shallow,configure } from 'enzyme';
import Home from './Home';
import axios from 'axios';
import Adapter from 'enzyme-adapter-react-16';

configure({adapter:new Adapter()});

jest.mock('axios');


describe('Home component', () => {
  describe('when rendered', () => {
    it('should fetch a list of cities', () => {
      const getSpy = jest.spyOn(axios, 'get');
      const cityInstance = shallow(
        <Home/>
      );
      expect(getSpy).toBeCalled();
    });
  });
});