2019年如何使用redux-mock-store配置或测试容器？

Question

我配置了一个容器来测试redux-mock-store到上一个版本，我得到了一些问题。find()函数不起作用。我曾经收到过零节点和零长度。当我使用挂载而不是浅层函数时，这是有效的，但我得到了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操作，您已经在这样做了)。此外，您还可以通过此方法使用浅层。