一般来说,我是 Jest 和 Java Script 的新手。我为我的一个组件编写了一个测试,但它似乎失败了,我无法弄清楚如何修复它以及出了什么问题(显然是酶的问题)。
它打印:
● Console
console.log src/App.js:18
props = {}
console.log src/App.js:19
url = ./api/user/undefined/
C:\Users\Itay\Documents\Matan - Microsoft\Matan\MatanClient\node_modules\react-dom\cjs\react-dom.development.js:62
throw error;
^
Invariant Violation: The `document` global was defined when React was
initialized, but is not defined anymore. This can happen in a test
environment if a component schedules an update from an asynchronous
callback, but the test has already finished running. To solve this, you can
either unmount the component at the end of your test (and ensure that any
asynchronous operations get canceled in `componentWillUnmount`), or you can
change the test itself to be asynchronous.
我写的测试尽可能简单:
import React from 'react';
import PropTypes from 'prop-types';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { AdminViewComponent } from '../components/AdminViewComponent.js';
configure({ adapter: new Adapter() });
describe('<AdminViewComponent />', () => {
it('renders an admin view', () => {
const admin = shallow(<AdminViewComponent />);
expect(admin.render()).toBeCalled;
});
});
组件本身看起来像这样:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Typeahead} from 'react-bootstrap-typeahead'; // ES2015
import axios from 'axios';
import {WholeScreen} from './WholeScreenComponent.js';
export class AdminViewComponent extends Component{
constructor(props) {
super(props);
this.state = {
emailList: [],
selectedUser: "",
SelectedUserDonationData:{}
};
this._handleChange = this._handleChange.bind(this);
}
getInitialState(){
return {
// [{}] is weird, either use undefined (or [] but undefined is better).
// If you use [], you loose the information of a "pending" request, as
// you won't be able to make a distinction between a pending request,
// and a response that returns an empty array
emailList: undefined,
selectedUser: undefined,
SelectedUserDonationData:undefined
}
}
componentDidMount(){
this.setState({emailList : undefined});
return axios.get('./api/user/', {
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer '+ this.props.token
}
}).then(response => {
const emailListResult = response.data;
this.setState({ emailList : emailListResult });
}).catch(function (error) {
console.log(error);
});
}
_handleChange(SelectedUser){
this.setState({ selectedUser : SelectedUser, selectedUserDonationData: undefined });
axios.get('./api/user/' + SelectedUser + '/' ,
{headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer '+ this.props.token
}
}).then(response => {
const selectedUserDonationDataResponse = response.data;
this.setState({ selectedUserDonationData : selectedUserDonationDataResponse });
console.log(selectedUserDonationDataResponse);
}).catch(function (error) {
console.log(error);
});
}
render() {
var adminView;
if (!this.state.emailList){
adminView = <div> Please wait while we retrive all users... </div>
}
else{
adminView =<div> <div> Please select user to show his/her donations </div>
<Typeahead
placeholder="Select user email..."
onChange={this._handleChange}
options={this.state.emailList}/> </div>;
}
var selectedUserData;
if (this.state.selectedUserDonationData){
selectedUserData = <div className="AdminViewData">
<h4 className="DtatOf">Showing donations of : {this.state.selectedUser}</h4>
<WholeScreen data={this.state.selectedUserDonationData.DonationsList}/>
</div>
}
var url = "./api/user/" ;
return(
<div className="AdminView">
{adminView}
{selectedUserData}
</div>
);
}
}
谢谢是提前!