Issue with unit testing of react component that uses "Material UI" using "Enzyme" - testing

Question

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>
);
}
Spec Files:
Login Form:
import React from 'react';
import { mount } from 'enzyme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import LoginForm from '../../src/components/LoginForm';
import baseTheme from '../../src/style/muiThemes/neo';
describe('Login ', () => {
describe('LoginForm test case ', () => {
const context = { muiTheme: getMuiTheme(baseTheme) };
const email = 'test#mail.com';
const pass = 'testPassword';
let form = null;
let textField = null;
let emailInput = null;
let passwordInput = null;
let submitButton = null;
let submitSpy = null;
let wrapper = null;
beforeEach(() => {
submitSpy = chai.spy.on(LoginForm.prototype, 'handleSubmit');
wrapper = mount(<LoginForm onSubmit={submitSpy} />, { context });
form = wrapper.find('LoginForm');
textField = wrapper.find('TextField');
emailInput = textField.get(0);
passwordInput = textField.get(1);
submitButton = wrapper.find('button[type="submit"]');
});
// Some test scenarios
}
Login View:
import React from 'react';
import { mount } from 'enzyme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import LoginView from '../../src/components/LoginView'; // Error while importing this file.
import baseTheme from '../../src/style/muiThemes/neo';
describe('LoginView test cases', () => {
const context = { muiTheme: getMuiTheme(baseTheme) };
let submitSpy = null;
let wrapper = null;
let loginForm = null;
beforeEach(() => {
submitSpy = chai.spy.on(LoginView.prototype, 'handleSubmit');
wrapper = mount(<LoginView onSubmit={submitSpy} />, { context });
loginForm = wrapper.find('LoginForm');
});
it('calls componentDidMount', () => {
const spy = chai.spy.on(LoginView.prototype, 'componentDidMount');
wrapper = mount(<LoginView />, { context });
expect(spy).to.have.been.called.once;
});
it('Access the dom', () => {
expect(loginForm).not.to.equal(undefined);
});
});