2

我是 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)

我不知道我是否缺少任何库，或者我是否在代码中做错了什么。任何人都可以帮忙吗？

4

2 回答 2

2

您P以错误的方式导入组件。因此，如果您

export class T extends  React.Component{}

然后导入应该是

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

看看这个article对你会有用的。

高温高压

于 2016-12-14T12:37:13.650 回答
0

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

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

但是根据酶文档（http://airbnb.io/enzyme/docs/api/shallow.html），浅层的第二个参数应该是一个带有上下文的对象，可以传递给组件。

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

const wrapper = shallow(<P attach={ true } />);
于 2016-12-14T03:56:26.370 回答