как я могу написать контрольные примеры для нижеуказанного компонента, используя 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', () => {
})
});
любая помощь приветствуется:)