TypeError:无法使用Jest和React读取未定义道具的属性“电子邮件".为什么? [英] TypeError: Cannot read property 'email' of undefined props using Jest and React. Why?

问题描述

尝试使用Jest为ReactJs代码编写单元测试.当我尝试传递道具时，它会向我显示以下错误

Trying to write unit tests for the ReactJs code using Jest. When I am trying to pass the props it shows me below error

TypeError:无法读取未定义的属性电子邮件"

TypeError: Cannot read property 'email' of undefined

  62 | 
  63 | const mapStateToProps = state => {
> 64 |   const { email, password, errors, loading } = state.auth;
     |           ^
  65 | 
  66 |   return { email, password, errors, loading };
  67 | };

SignIn.js

SignIn.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import * as actions from "Actions";
import classnames from "classnames";

class SignIn extends Component {
  onSubmit(e) {
    e.preventDefault();

    const { email, password } = this.props;
    this.props.loginUser({ email, password });
  }

  render() {
    const { email, password, errors, fieldChanged } = this.props;
    return (
      <div className="contentWrapper">
        ....
      </div>
    );
  }
}

SignIn.propTypes = {
  loginUser: PropTypes.func.isRequired,
  fieldChanged: PropTypes.func.isRequired,
  email: PropTypes.string.isRequired,
  password: PropTypes.string.isRequired
};

const mapStateToProps = state => {
  const { email, password, errors, loading } = state.auth;

  return { email, password, errors, loading };
};

export default connect(
  mapStateToProps,
  actions
)(SignIn);

SignIn.test.js

SignIn.test.js

import React, { Suspense } from 'react';
import Enzyme, {shallow} from 'enzyme';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
Enzyme.configure({ adapter: new Adapter() });
import { Provider } from 'react-redux';
import configureMockStore from "redux-mock-store";
import thunk from 'redux-thunk';
import SignIn from '../containers/authentication/SignIn';
import mapStateToProps from "../containers/authentication/SignIn";

const mockStore = configureMockStore();

describe('SignIn', () => {

  it('render sign in', () => {
      const state = {
          email: "[e-mail]",
          password: "pass123"
      };

      const store = mockStore(state);
      const dwrapper = Enzyme.mount(<SignIn store={store} />);
      console.log(dwrapper);
      expect(dwrapper.props().email).toBe("[e-mail]")  
  });
});

需要对登录进行单元测试并得到此错误，如何使用道具映射状态?

Need to unit test SignIn and getting this error, how to map state with props?

用道具映射状态的正确方法是什么.

What will be the correct way to map state with props.

推荐答案

SignIn.test.js

SignIn.test.js

关键的解决方案是我们必须在浅层组件中添加dive()，以便它可以完全获取组件包装，该解决方案对我有用

The key too solution is that we have to add dive() to the shallow component so that it could get the component wrapper completely, this solution worked for me

import React, { Suspense } from 'react';
import Enzyme, { shallow, configur } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-15';
import SignIn from '../containers/authentication/SignIn';
import configureStore from '../configureStore';

Enzyme.configure({
    adapter: new EnzymeAdapter(),
    disableLifecycleMethods: true
});

describe('SignIn', () => {
  it('render sign in', () => {
     const state = {
          auth: {
            email: "[e-mail]",
            password: "password",
            errors: {
              login: "red"
            },
            loading: true
          }          
      };

      const store = configureStore(state);
      const dwrapper = shallow(<SignIn store={store}/>).dive();
      expect(dwrapper.find(".contentWrapper").exists()).toBeTruthy();  
  });
});

这篇关于TypeError:无法使用Jest和React读取未定义道具的属性“电子邮件".为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！