Question

我创建了两个组件LoginView和Login Form。 LoginView使用LoginForm组件进行渲染。我正在分别为LoginView和LoginForm编写测试用例。问题是当我在单个规范中导入LoginView和LoginForm组件时，它工作正常。但是当我尝试导入相同的任一组件时，它会引发错误

不变违规：addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能正在向未在组件的render方法中创建的组件添加引用，或者您已经加载了多个React副本。

错误说

我可能正在使用React的多个副本，但我正在使用 react@15.3.2和material-ui@0.15.4
使用'ref'，我没有使用'ref'，但是Material-ui使用了ref 他们的组成部分。

我无法解决问题，感谢任何帮助/建议。

Node v6.6.0

NPM 3.10.3

文件是：

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>
    );
}

规范文件：

登录表格：

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
}

登录视图：

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);
  });
});

使用“材料UI”使用“酶”

0 个答案: