Error: Enzyme Internal Error: unknown composite type undefined

Question

I'm getting this error when try to apply enzyme and I couldn't find any relative issue about this.

Here's the 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);
  });
});

Here's the 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);

When I run;

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

I get this error;

< AccountLoginForm /> 1) calls componentDidMount

0 passing (46ms) 1 failing

1) < AccountLoginForm /> calls componentDidMount: Error: Enzyme Internal Error: unknown composite type undefined at 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) at new ShallowWrapper (node_modules\enzyme\build\ShallowWrapper.js:120:37) at shallow (node_modules\enzyme\build\shallow.js:19:10) at Context. (D:/Users/buraku/Desktop/ReactProjects/feature_buraku_v3/iot_core_client/frontend/src/antd/Login/LoginPageTest.js:17:21)

npm ERR! Test failed. See above for more details.

Answer 1

I had the same issue, My solution was very simple, check if the packages react-test-renderer and react have the same base version in the package.json file

In example,

this will fail with the enzyme composite error using shallow:

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

this one is ok using shallow:

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

Hope it helps,

Greetings!

Answer 2

My fix was to update my require in my test script from

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

to

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

This is due to my react version being 16.4.1,

then, of course, I also needed to npm install it,

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