I have created two components LoginView and Login Form. LoginView uses LoginForm component for rendering. I am writing test cases for LoginView and LoginForm separately. The issue is when I import the LoginView and LoginForm component in a single spec, it works fine. But as I am trying to import same either components it raises an error
Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's
render
method, or you have multiple copies of React loaded.
The error says that
-
I might be using multiple copies of React, but I am using react@15.3.2 and material-ui@0.15.4
-
The use of 'ref', I have not used 'ref' but Material-ui uses ref for their component.
I am unable to solve issue, any help/ suggestions are appreciated.
Node v6.6.0
NPM 3.10.3
Files are:
LoginView:
import React from 'react';
import { FlatButton, Dialog } from 'material-ui';
import BaseComponent from './BaseComponent';
import LoginForm from './LoginForm';
export default class LoginView extends BaseComponent {
// statements
render(
<LoginForm onSubmit={this.handleSubmit} loading={loading} />
<br />
<FlatButton
secondary
onClick = { this.navToRegister }
label = {__('No Account? Create one.')}
/>
<br />
<FlatButton
secondary
onClick = { this.navToForgotPassword }
label = {__('Forgot your password?')}
/>
<br />
)
}
LoginForm:
import React from 'react';
import { TextField, RaisedButton } from 'material-ui';
export default class LoginForm extends React.Component {
// Statements
return (
<form onSubmit={this.handleSubmit}>
<TextField
type = "text"
/>
<br />
<TextField
type= "password"
/>
<br />
<RaisedButton
type = "submit"
/>
</form>
);
}
Aucun commentaire:
Enregistrer un commentaire