Question

我在尝试使用酶时遇到此错误，我找不到任何相关问题。

这是test.js;

import React from 'react';
import AccountLoginForm from './LoginPage';
import sinon from 'sinon';
import { mount, shallow, configure } from 'enzyme';
import { expect } from 'chai';
import Adapter from 'enzyme-adapter-react-15';
import configureStore from 'redux-mock-store';

configure({ adapter: new Adapter() });

const mockStore = configureStore();

sinon.spy(AccountLoginForm.prototype, 'componentDidMount');

describe('<AccountLoginForm />', () => {
  it('calls componentDidMount', () => {
    const wrapper = shallow(<AccountLoginForm />,  { context: { store: mockStore() } });
    expect(Foo.prototype.componentDidMount.calledOnce).to.equal(true);
  });
});

这是LoginPage;

import React, { Component } from 'react';
import { Form, Icon, Input, Button, Checkbox, Row, Col, Alert, Card } from 'antd';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as api from '../../apiCalls/axiosCalls';
import * as authenticationActions from '../../actions/authenticationActions';
import './LoginPage.css';

const FormItem = Form.Item;

class AccountLoginForm extends Component {

  constructor(props) {
    super(props);
    this.state = {
      errorValidation: true
    }
  }

  componentDidMount(){
    console.log("DENEME")
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const userData = {
          username: values.userName,
          password: values.password
        };
        api.postLogin(userData)
        .then((response) => {
          this.props.actions.userLoginCompleted(response);
          this.props.router.push('/');
          this.setState({ errorValidation: true });
        })
        .catch((err) => {
          // TODO update field warnings based on login failure
          this.setState({ errorValidation: false });
        });
      }
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    return (


      <Row align="center">

        <Col >

          <Card style={{ width: 800, margin: "auto", marginTop:"200px"}}>
            <Row align="middle" className="page-title-bar" gutter={36}>

              <Col span={14} className="login-box">
                <img alt="example" src="../../assets/images/loginIot.png" />
                <h2>Netas IOT Platform </h2>
                {/* <p>
                  Nulla sit amet est. Aenean viverra rhoncus pede. Fusce vel dui. Nunc nec neque.

Sed hendrerit. Suspendisse eu ligula.
                                </p> */}
              </Col>
              <Col span={10}  >
                <div className="loginlogo" >

                  <img src="../../assets/images/NetION.png" />


                </div>
                <Form onSubmit={this.handleSubmit} className="login-form">
                  <FormItem>
                    {getFieldDecorator('userName', {
                      rules: [{ required: true, message: 'Please input your username!' }],
                    })(
                      <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
                      )}
                  </FormItem>
                  <FormItem>
                    {getFieldDecorator('password', {
                      rules: [{ required: true, message: 'Please input your Password!' }],
                    })(
                      <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
                      )}
                  </FormItem>
                  <FormItem>
                    {/* {getFieldDecorator('remember', {
                valuePropName: 'checked',
                initialValue: true,
              })(
                <Checkbox>Remember me</Checkbox>
                                )}
              <a className="login-form-forgot" href="">Forgot password</a> */}
                    {!this.state.errorValidation &&
                      <Alert
                        message='Error'
                        description="Login is failed."
                        type="error"
                        className="login-form-error"
                        showIcon />
                    }
                    <br />
                    <Button type="primary" htmlType="submit" className="login-form-button">
                      Log in
                    </Button>
                  </FormItem>
                </Form>
              </Col>
            </Row>
          </Card>

        </Col>
      </Row>

    );
  }
}

const LoginPage = Form.create()(AccountLoginForm);


function mapStateToProps(state, ownProps){
  return {
      authentication: state.authentication
  };
}

function mapDispatchtoProps(dispatch) {
  return {
    actions: bindActionCreators(authenticationActions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchtoProps)(LoginPage);

当我跑步时;

mocha --require ignore-styles --compilers js:babel-core/register frontend/src/antd/Login/test

我收到此错误;

＆LT; AccountLoginForm /＆gt;       1）调用componentDidMount

0传球（46码）1失败

1）＆lt; AccountLoginForm /＆gt;          调用componentDidMount：        错误：酶内部错误：未定义的未知复合类型         在compositeTypeToNodeType（node_modules \ enzyme-adapter-react-15 \ build \ ReactFifteenAdapter.js：61：13）         at Object.getNode（node_modules \ enzyme-adapter-react-15 \ build \ ReactFifteenAdapter.js：254：27）         在新的ShallowWrapper（node_modules \ enzyme \ build \ ShallowWrapper.js：120：37）         在浅（node_modules \ enzyme \ build \ shallow.js：19：10）         在上下文。（d：/Users/buraku/Desktop/ReactProjects/feature_buraku_v3/iot_core_client/frontend/src/antd/Login/LoginPageTest.js：17：21）

npm ERR！测试失败。有关详细信息，请参见上文。

Answer 1

我有同样的问题，我的解决方案很简单，检查包的react-test-renderer和react在package.json文件中是否有相同的基本版本

例如，

这将使用浅层的酶复合物错误失败：

"react-test-renderer": "16.4"
"react": "15.6"

这个可以使用浅：

"react-test-renderer": "15.5.4"
"react": "15.6.2"

希望它有所帮助，

问候！

Answer 2

我的解决方法是从以下位置更新测试脚本中的需求

const EnzymeAdapter= require('enzyme-adapter-react-15');

到

const EnzymeAdapter= require('enzyme-adapter-react-16');

这是由于我的反应版本是16.4.1，

然后，当然，我还需要npm安装它，

npm install enzyme-adapter-react-16 --save-dev

Answer 3

我通过将'浅'更改为'mount'

解决了这个问题

据我所知，浅用于虚拟组件， mount 用于容器。< / p>

错误：酶内部错误：未知复合类型未定义

3 个答案: