React
axios

React + axios + axios-mock-adapter でモックのテスト

More than 1 year has passed since last update.

create-react-appで作成したプロジェクトのApp.jsを編集。
axiosのモックのテスト。

App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

/*
  $ npm install --save axios axios-mock-adapter
*/
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

class User extends Component {

  render() {
    return (
      <div>
        <span>{this.props.id}: {this.props.name}</span>
      </div>
    );
  }
}

class UserList extends Component {

  render() {
    return (
      <ul>
        {this.props.users.map(user => <li>
          <User id={user.id} name={user.name} />
        </li>)}
      </ul>
    );
  }
}

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      users: [],
    };

    // モックデータの作成
    let mock = new MockAdapter(axios);
    mock.onGet('/users').reply(200, {
      users: [
        { id: 1, name: 'John Lenon' },
        { id: 2, name: 'James Brown' },
      ]
    });

    // Ajax
    axios.get('/users')
        .then(res => {
          this.setState({
            users: res.data.users,
          });
        })
        .catch(err => {
            alert(err);
        });
  }

  render() {
    return (
      <div className="App">
        <UserList users={this.state.users} />
      </div>
    );
  }
}

export default App;