unit-testing - 无法读取未定义单元测试 enzyme 的属性 'contextTypes'

Question

我正在尝试使用 redux 应用程序在我的 React 中进行单元测试。所以我需要测试连接的组件，不幸的是我收到了这个错误:

Cannot read property 'contextTypes' of undefined I use enzyme in unit testing Here is my component:

    import React from 'react';
    import TextFieldGroup from '../common/TextFieldGroup';
    import validateInput from '../../server/validations/login';
    import { connect } from 'react-redux';
    import { login } from '../../actions/authActions';

    class LoginForm extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          username: '',
          password: '',
          errors: {},
          isLoading: false
        };

        this.onSubmit = this.onSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
      }

      isValid() {
        const { errors, isValid } = validateInput(this.state);

        if (!isValid) {
          this.setState({ errors });
        }

        return isValid;
      }

      onSubmit(e) {
        e.preventDefault();
        if (this.isValid()) {
          this.setState({ errors: {}, isLoading: true });
          this.props.login(this.state).then(
            (res) => this.context.router.push('/'),
            (err) => this.setState({ errors: err.response.data.errors, isLoading: false })
          );
        }
      }

      onChange(e) {
        this.setState({ [e.target.name]: e.target.value });
      }

      render() {
        const { errors, username, password, isLoading } = this.state;

        return (
          <form onSubmit={this.onSubmit}>
            <h1>Login</h1>

            { errors.form && <div className="alert alert-danger">{errors.form}</div> }

            <TextFieldGroup
              field="username"
              label="Username"
              value={username}
              error={errors.username}
              onChange={this.onChange}
            />

            <TextFieldGroup
              field="password"
              label="Password"
              value={password}
              error={errors.password}
              onChange={this.onChange}
              type="password"
            />

            <div className="form-group"><button className="btn btn-primary" disabled={isLoading}>Login</button></div>
          </form>
        );
      }
    }

    LoginForm.propTypes = {
      login: React.PropTypes.func.isRequired
    }

    LoginForm.contextTypes = {
      router: React.PropTypes.object.isRequired
    }

    export default connect(null, { login })(LoginForm);

这是我的测试:

    import React from 'react';
    import { mount, shallow } from 'enzyme';
    import {expect} from 'chai';
    import sinon from 'sinon';
    import { connect } from 'react-redux'

    import { Login } from '../../js/react/components/login/LoginForm';

    describe('<Login />', function () {
      it('should have an input for the username', function () {
        const wrapper = shallow(<Login />);
        expect(wrapper.find('input[name=username]')).to.have.length(1);
      });

      it('should have an input for the password', function () {
        const wrapper = shallow(<Login />);
        expect(wrapper.find('input[name=password]')).to.have.length(1);
      });

      it('should have a button', function () {
        const wrapper = shallow(<Login />);
        expect(wrapper.find('button')).to.have.length(1);
      });

      it('simulates click events', () => {
        const onButtonClick = sinon.spy();
        const wrapper = shallow(
          <Login onButtonClick={onButtonClick} />
        );
        wrapper.find('button').simulate('click');
        expect(onButtonClick).to.have.property('callCount', 1);
      });

    });

非常感谢建议和答案:)

Answer 1

测试装饰组件

要直接测试组件，您只需导出组件本身的函数，而不将其传递到 Connect。

当前，在您的测试中，您正在导入 connect() 返回的包装器组件，而不是 LoginForm 组件本身。如果您想测试 LoginForm 组件与 Redux 的交互，这很好。如果您不单独测试组件，那么这种导出和导入组件的方法就很好。但是，您需要记住使用专门为此单元测试创​​建的组件来包装测试中的组件。现在让我们看一下正在测试连接组件的情况，并解释为什么我们将其包装在单元测试中。

react-redux中Provider和Connect组件的关系

react-redux 库为我们提供了一个 Provider 组件。 Provider 的目的是允许其任何子组件在包装在 Connect 组件中时访问 Redux 存储。 Provider 和 Connect 之间的这种共生关系允许包装在 Connect 组件中的任何组件通过 React 的 context 访问 Redux 存储。功能。

测试连接的组件

还记得连接组件是包装在 Connect 组件中的组件，这种包装使我们的组件可以访问 Redux 存储吗？因此，我们需要在测试文件中创建一个模拟存储，因为我们需要一个存储来测试组件如何与其交互。

在测试中为我们的连接组件提供一个带有 Provider 的商店

但是 Connect 不知道如何神奇地访问商店。它需要嵌套(包装)在组件中。 Provider 组件通过 React 的 context api 连接到 Provider，为 Connect 中包装的组件提供对 Store 的访问权限。

正如我们所见，Provider 接受一个由 Redux 存储组成的 prop:

ReactDOM.render(
      <Provider store={store}>
        <MyRootComponent />
      </Provider>,
      rootEl
    )

因此，要测试连接的组件，您需要用 Provider 包装它。请记住，Provider 将 Redux store 对象作为 prop。对于我们的测试，我们可以使用 redux-mock-store 库，它可以帮助我们设置一个模拟存储，并为我们提供一些存储上的方法来跟踪哪些操作已被调度(如果我们需要的话)。

import { Provider } from 'react-redux'
import { mount } from 'enzyme'
import chai, {expect} from 'chai'
import chaiEnzyme from 'chai-enzyme'
import configureMockStore from 'redux-mock-store'

chai.use(chaiEnzyme())

import ConnectedLoginForm, from '../app.js'
const mockStore = configureMockStore(middlewares)

describe.only('<LoginForm Component />', () => {
it('LoginForm should pass a given prop to its child component' () => {
    const store = mockStore(initialState)
    const wrapper = mount(
      <Provider store={store}>
        <ConnectedLoginForm />
      </Provider>
    )
    expect(wrapper.type()).to.equal('div')
  })
})

但有时您只想测试组件的渲染，而不使用 Redux 存储。让我们看一下这个案例，我们想要单独测试未连接的 LoginForm 组件的渲染。

测试未连接的组件

因此，当前您正在测试通过使用 Connect 包装原始 LoginForm 组件创建的新组件。

为了在没有连接的情况下测试原始组件本身，为 LoginForm 组件创建一个 单独的第二个导出声明。

import { connect } from 'react-redux'

// Use named export for unconnected component (for tests)
export class App extends Component { /* ... */ }

// Use default export for the connected component (for app)
export default connect(mapStateToProps)(App)

您现在可以在没有 Redux 存储的情况下测试组件的渲染。

导入测试中的组件

请记住，当您以这种方式导出组件时 -

• 默认导出用于导入连接的组件
• 指定导出为导入未连接的组件

现在在您的测试文件中导入未修饰的 LoginForm 组件，如下所示:

// Note the curly braces: grab the named export instead of default export
import { LoginForm } from './App'

或者导入未修饰和修饰(连接)的组件:

import ConnectedLoginForm, { LoginForm } from './App'

如果您想测试 LoginForm 组件如何与 Redux 存储交互，您必须