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.
