如何在2019年配置或测试使用Redux Mock商店的容器

Question

我配置了一个容器，以用redux-mock商店测试最后一个版本，我遇到了一些问题。find((函数不起作用。我曾经收到零节点和零长度。当我使用Mount来浅功能时，这可以工作，但是我会发现Redux MapDispatchToprops未能识别的问题。我如何保证将调用该行动？我不想测试商店，而是因为我使用thunk，而是动作功能。我的推理是正确的吗？

我的容器：

import React, { useState } from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import styles from './Auth.module.css'
import Input from '../../components/UI/Input/Input'
import Button from '../../components/UI/Button/Button'
import Logo from '../../components/UI/Logo/Logo'
import Spinner from '../../components/UI/Spinner/Spinner'
import { auth as authAction } from '../../store/actions/index'
import { checkValidity } from '../../shared/utility'
export const Auth = (props) => {
    const [formIsValid, setFormIsValid] = useState(false)
    const [authForm, setAuthForm] = useState({
        email: {
            elementType: 'input',
            elementConfig: {
                type: 'email',
                placeholder: 'Enter your email'
            },
            value: '',
            validation: {
                required: true,
                isEmail: true
            },
            valid: false,
            touched: false
        },
        password: {
            elementType: 'input',
            elementConfig: {
                type: 'password',
                placeholder: 'Enter your password'
            },
            value: '',
            validation: {
                required: true,
                minLength: 6
            },
            valid: false,
            touched: false
        },
    })
    const inputChangeHandler = (event, controlName) => {
        const updatedControls = {
            ...authForm,
            [controlName]: {
                ...authForm[controlName],
                value: event.target.value,
                valid: checkValidity(event.target.value, authForm[controlName].validation),
                touched: true
            }
        }
        let formIsValid = true;
        for (let inputIdentifier in updatedControls) {
            formIsValid = updatedControls[inputIdentifier].valid && formIsValid
        }
        setAuthForm(updatedControls)
        setFormIsValid(formIsValid)
    }
    const submitHandler = (event, signup) => {
        event.preventDefault()
        props.onAuth(
            authForm.email.value,
            authForm.password.value,
            signup
        )
    }
    const formElementsArray = []
    for (let key in authForm) {
        formElementsArray.push({
            id: key,
            config: authForm[key]
        })
    }
    let formFields = formElementsArray.map(formElement => (
        <Input
            key={formElement.id}
            elementType={formElement.config.elementType}
            elementConfig={formElement.config.elementConfig}
            value={formElement.config.value}
            invalid={!formElement.config.valid}
            shouldValidate={formElement.config.validation}
            touched={formElement.config.touched}
            changed={(event) => inputChangeHandler(event, formElement.id)} />
    ))
    let form = (
        <>
            <form onSubmit={(event) => submitHandler(event, false)}>
                {formFields}
                <Button
                    disabled={!formIsValid}
                    btnType="Default">Log In</Button>
            </form>
            <Button
                clicked={(event) => submitHandler(event, true)}
                disabled={!formIsValid}
                btnType="Link">Sign Up</Button>
        </>
    )
    if (props.loading) {
        form = <Spinner />
    }
    const errorMessage = props.error ? (
        <div>
            <p style={{ color: "red" }}>{props.error}</p>
        </div>
    ) : null;
    let authRedirect = null;
    if (props.isAuthenticated) {
        authRedirect = <Redirect to={'/'} />
    }
    return (
        <main className={styles.Auth}>
            {authRedirect}
            <div className={styles.AuthForm}>
                <h1>Log in to your account</h1>
                <Logo height="3em" />
                {errorMessage}
                {form}
            </div>
        </main>
    )
}
const mapStateToProps = (state) => {
    return {
        loading: state.auth.loading,
        error: state.auth.error,
        isAuthenticated: state.auth.token !== null,
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        onAuth: (email, password, isSignup) => dispatch(authAction(email, password, isSignup))
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Auth)

我的测试：

import React from 'react';
import { Redirect } from 'react-router-dom';
import thunk from 'redux-thunk';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import configureStore from 'redux-mock-store';
import Auth from './Auth';
import Spinner from '../../components/UI/Spinner/Spinner';
import Button from '../../components/UI/Button/Button';
import Input from '../../components/UI/Input/Input';
configure({ adapter: new Adapter() });
const setup = () => {
    const props = {
        onAuth: jest.fn()
    }
    const middlewares = [thunk]
    const mockStore = configureStore(middlewares);
    const initialState = {
        auth: {
            token: null,
            email: null,
            error: null,
            loading: false
        }
    };
    const store = mockStore(initialState);
    const enzymeWrapper = shallow(<Auth store={store} {...props} />).dive();
    return {
        enzymeWrapper,
        props,
        store
    }
}
describe('<Auth />', () => {
    it('should calls onSubmit prop function when form is submitted', () => {
        const { enzymeWrapper: wrapper, props: reduxProps, store } = setup();
        const form = wrapper.find('form');
        form.simulate('submit', {
            preventDefault: () => { }
        });
        expect(wrapper.props().onAuth).toHaveBeenCalled();
    });
});

Answer 1

要能够在没有连接存储的情况下测试Auth类，您需要使用命名导入而不是默认导入。pfb要添加以导入AUTH组件的测试文件中的行：

import { Auth } from './Auth'; // notice the curly braces around the component name

另外，使用这种方法，您不必在渲染时将存储作为组件传递给组件，并且您可以将操作作为模拟功能(您已经为onAuth操作所做的(传递。您也可以使用这种方法使用浅。