написание теста на сервисные вызовы в энзиме - PullRequest
1 голос
/ 20 марта 2019

как я могу написать контрольные примеры для нижеуказанного компонента, используя jest.

если я буду издеваться над файлами импорта.

// App.js

import React, {Component} from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Layout from "../Layout";
import Home from "../components/pages/Home";
import Users from "../components/pages/Users";
import UserList from "../components/pages/UserList";
import AppContext from "../components/context/App/index";
import Loader from "../components/Loader";
import Error from "../components/Error";
import config from "../config";
import http from '../lib/http';

class Routes extends Component {
  state = {
    displayLoader: true,
    displayError: false,
    errorMessage: null,
    data: null
  };

  // Life cycle methods
  componentWillMount() {
    this.setState({
      displayLoader: true
    });
  }

  componentDidMount() {
    this._resolveData();
  }

 
  _resolveData = async () => {
    try {
      const data = await http.get(config.endPoints.dataEndPoint);
      // check list are available
      if (data.list) {
        this.setState({
          data: data.list,
          displayLoader: false
        });
      } else {
        const error = {
          message: data.message,
          status: data.status
        };
        throw error;
      }
    } catch (error) {
      this.setState({
        displayLoader: false,
        displayError: true,
        errorMessage: error.message
      });
    }
  };

  render() {
    const {
      displayLoader,
      displayError,
      errorMessage,
      data
    } = this.state;
    return displayLoader ? (
      <Loader />
    ) : displayError ? (
      <Error message={errorMessage} />
    ) : Object.keys(data).length > 0 ? (
      <Router>
        <AppContext.Provider value={data}>
            <Layout>
              <Switch>
                <Route path="/sample" exact component={Home} />
                <Route path="/sample/userList/" component={UserList} />
                <Route path="/sample/users/" component={Users} />
              </Switch>
            </Layout>
        </AppContext.Provider>
      </Router>
    ) : (
      <p>Please contact support team</p>
    );
  }
}

export default Routes;


//lib/http.js

async function get(url) {
    try {
        const response = await fetch(url, { method: 'get' });
        const body = await response.json();
        return body;
    }
    catch (err) {
        throw err;
    }
}

export default {get}


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

describe('Given the Router component is rendered', () => {
    test('it should render the markup', () => {
        const tree = shallow(<App />);
        expect(tree).toMatchSnapshot();
    });
    test('should get the data once service resolves', () => {

    })
});

любая помощь приветствуется:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...