lundi 3 octobre 2016

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

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

  1. I might be using multiple copies of React, but I am using react@15.3.2 and material-ui@0.15.4

  2. 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