当我尝试测试一个非常简单的组件时出现 contextTypes 错误

Question

我是 reactjs 新手，正在尝试为一个简单的函数编写单元测试。 我正在使用酶，这是我的测试：

import React from 'react';
import { shallow } from 'enzyme';
import {P} from "../../src/app/components/T";
import ToDoItem from "../../src/app/components/ToDoItem";

function mockItem(overrides) {
  // … create mock ToDo Item
}

describe('<P />', () => {
  it('renders without exploding', () => {
    const wrapper = shallow(<P attach={ true } />);
    expect(wrapper.length).toEqual(1);
  });
});

这是我的组件：

import  React from "react";

export class T extends  React.Component{
  render() {
    return (
    <div>
        <div className="row panel">
            <div className="col-sm-12 header">uuuuu</div>
        </div>
    </div>
    );
  }
}

但是当我运行它时，我收到以下错误：

<P /> renders without exploding:
 TypeError: Cannot read property 'contextTypes' of undefined
  at ShallowComponentWrapper._maskContext (node_modules\react-dom\lib\ReactCompositeComponent.js:461:33)
  at ShallowComponentWrapper._processContext (node_modules\react-dom\lib\ReactCompositeComponent.js:481:30)
  at ShallowComponentWrapper.mountComponent (node_modules\react-dom\lib\ReactCompositeComponent.js:180:30)
  at Object.mountComponent (node_modules\react-dom\lib\ReactReconciler.js:46:35)
  at ReactShallowRenderer._render (node_modules\react-dom\lib\ReactShallowRenderer.js:126:23)
  at _batchedRender (node_modules\react-dom\lib\ReactShallowRenderer.js:79:12)
  at Object.batchedUpdates (node_modules\react-dom\lib\ReactDefaultBatchingStrategy.js:60:14)
  at Object.batchedUpdates (node_modules\react-dom\lib\ReactUpdates.js:97:27)
  at ReactShallowRenderer.render (node_modules\react-dom\lib\ReactShallowRenderer.js:106:18)
  at ReactShallowRenderer.render (node_modules\enzyme\build\react-compat.js:158:39)
  at node_modules\enzyme\build\ShallowWrapper.js:90:26
  at ReactDefaultBatchingStrategyTransaction.perform (node_modules\react-dom\lib\Transaction.js:140:20)
  at Object.batchedUpdates (node_modules\react-dom\lib\ReactDefaultBatchingStrategy.js:62:26)
  at batchedUpdates (node_modules\react-dom\lib\ReactUpdates.js:97:27)
  at node_modules\enzyme\build\ShallowWrapper.js:89:41
  at withSetStateAllowed (node_modules\enzyme\build\Utils.js:224:3)
  at new ShallowWrapper (node_modules\enzyme\build\ShallowWrapper.js:88:38)
  at shallow (node_modules\enzyme\build\shallow.js:19:10)
  at Context.<anonymous> (C:/tj/reactjs-basics/test/components/test.js:16:25)

我不知道我是否缺少任何库，或者我的代码中是否有问题。有人可以帮忙吗？

Answer 1

您以错误的方式导入P 组件。所以如果您

export class T extends  React.Component{}

那么import应该是

import { T } from "../../src/app/components/T";
...
shallow(<T attach={ true } />);

看看这个article，它会对你有用。

HTH

Answer 2

我不确定你想用这条线做什么

const wrapper = shallow(<P/>, { attach: true });

但是根据 Enzymes 文档 (http://airbnb.io/enzyme/docs/api/shallow.html)，shallow 的第二个参数应该是一个对象，它具有传递给组件的上下文。

如果您尝试将其作为道具传递给您的组件，您应该像这样编写浅声明：

const wrapper = shallow(<P attach={ true } />);