Тестирование компонентов с помощью Jest завершается неудачно

Question

Я новичок в 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>          
      );
    }
}

Спасибо заранее!

Answer 1

Я считаю, что ваш мелкий импорт рендерера должен выглядеть так:

import { shallow, configure  } from 'enzyme';

РЕДАКТИРОВАТЬ: не могли бы вы добавить следующий импорт и инициализацию ниже вашего мелкого рендерера.

import Adapter from 'enzyme-adapter-react-16';

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

Как указано в документации по ферменту: установка фермента