Formik测试错误:在初始化React时定义了‘document`全局，但不再定义

Question

尝试使用React测试Formik。下面是Formik组件：

import React, { Component } from 'react';
import { Formik, Field } from 'formik';
import { Button } from 'reactstrap';
import * as Yup from 'yup';
import axios from 'axios';
import { connect } from 'react-redux';
import TestComp from './../TestComp';

export class FormikComp extends Component{

    constructor(props){
        super(props);
        this.consoleMe = this.consoleMe.bind(this);
        this.state = {}

    }

    consoleMe(values){
        this.setState({
            values
        })
        console.log(this.state)
    }

    render(){

        return(
            <div id="div">
            <Formik
                enableReinitialize= {true}
                validateOnChange={false}
                initialValues={ {
                    user_name: '',
                    user_city: '',
                }}
                onSubmit={( values, {}) => {
                    this.consoleMe(values)
                }}
                validationSchema={Yup.object().shape({
                  user_name: Yup.string()
                    .test(
                      'test1',
                      'not longer than req length',
                      function(value){
                        if(value.length < 10){
                          return false;
                        }
                        return true
                      }
                    )
                })

                }
                render= {({
                    values,
                    errors,
                    handleSubmit,
                    handleChange,
                    touched,
                    ...props
                  }) => (
                    <div>
                    <form onSubmit={handleSubmit}>
                    <label>
                        <Field name="user_name" type="text" id="one" onChange={handleChange} value={values.user_name}/>
                        <p>{values.user_name}</p>
                        <p>{errors.user_name}</p>
                        <p>{JSON.stringify(this.state)}</p>
                    </label>
                    <label>

                    </label>
                        <Button
                            id="three"
                            color="info"
                            type="submit"
                        >
                            Click me!
                        </Button>
                    </form>
                    </div>
                  )}
            />
            </div>
        )
    }
}

function mapStateToProps(state, ownProps) {
    return state;
}

export default connect(mapStateToProps)(FormikComp)

下面是我正在尝试运行的测试(错误出在按钮submit...)

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field } from 'formik';
import Adapter from 'enzyme-adapter-react-16';
import Enzyme, { shallow, mount } from 'enzyme';
import { createStore } from 'redux';
import { reducers } from './../App';
import FormikComp from './';

// const initState = {user: {name: "Nathan Sainsbury", age: 30}};
const initState = {}
const store = createStore(reducers, initState);

const noop = () => {};
Enzyme.configure({ adapter: new Adapter() });

test('Cool', async () => {
    const wrapper = await mount(<FormikComp store={store} />)
    const dateInput = await wrapper.find('input')
    const button = await wrapper.find('button')
    const text = "nathannathan"

    await dateInput.simulate('change', {persist: noop, target : {name: 'user_name', value: text}})
    button.simulate('click')
    button.simulate('submit')
    console.log(wrapper.html())
    expect(wrapper.html().indexOf(`<p>${text}</p>`) != -1).toEqual(true)
})

这是我收到的错误：

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.
    at invariant (/home/nathan/Projects/react-testing/node_modules/fbjs/lib/invariant.js:42:15)
    at Object.invokeGuardedCallbackDev (/home/nathan/Projects/react-testing/node_modules/react-dom/cjs/react-dom.development.js:79:44)
    at invokeGuardedCallback (/home/nathan/Projects/react-testing/node_modules/react-dom/cjs/react-dom.development.js:187:29)
    at commitRoot (/home/nathan/Projects/react-testing/node_modules/react-dom/cjs/react-dom.development.js:15536:7)
    at completeRoot (/home/nathan/Projects/react-testing/node_modules/react-dom/cjs/react-dom.development.js:16618:34)
    at performWorkOnRoot (/home/nathan/Projects/react-testing/node_modules/react-dom/cjs/react-dom.development.js:16563:9)
    at performWork (/home/nathan/Projects/react-testing/node_modules/react-dom/cjs/react-dom.development.js:16482:7)
    at performSyncWork (/home/nathan/Projects/react-testing/node_modules/react-dom/cjs/react-dom.development.js:16454:3)
    at requestWork (/home/nathan/Projects/react-testing/node_modules/react-dom/cjs/react-dom.development.js:16354:5)
    at scheduleWork$1 (/home/nathan/Projects/react-testing/node_modules/react-dom/cjs/react-dom.development.js:16218:11)
    at Object.enqueueSetState (/home/nathan/Projects/react-testing/node_modules/react-dom/cjs/react-dom.development.js:11299:5)
    at Formik.Object.<anonymous>.Component.setState (/home/nathan/Projects/react-testing/node_modules/react/cjs/react.development.js:270:16)
    at /home/nathan/Projects/react-testing/node_modules/formik/dist/formik.js:5932:23
    at <anonymous>

我似乎找不到错误，我到处找了看，但找不到太多...任何帮助都是非常感谢的。我相信我看到一些东西说点击按钮会返回一个承诺，但我不确定……

Answer 1

我自己也遇到了这个。能够使用setImmediate来解决这个问题

​

describe('handleChange', () => {
  it('sets values state', async done => {
    const wrapper = mount(
      <Router>
        <LoginForm />
      </Router>
    );

    wrapper.find('input[id="email"]').simulate('change', {
      persist: noop,
      target: {
        id: 'email',
        value: 'test@email.com'
      }
    });

    setImmediate(() => {
      expect(wrapper.find('input[id="email"]').props().value).toEqual(
        'test@email.com'
      );
      done();
    });
  });
});

​