3

Formik を React でテストしようとしています。以下は 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)

以下は、実行しようとしているテストです（エラーは送信ボタンにあります...）

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>

エラーが見つからないようです。周りを見回しましたが、あまり見つかりません...どんな助けも大歓迎です。ボタンをクリックすると約束が返されると言っているのを見たことがあると思いますが、よくわかりません...

4

1 に答える 1