当我尝试测试一个非常简单的组件时出现 contextTypes 错误
I get a contextTypes error when I try to test a very simple component
我是 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)
我不知道我是否遗漏了任何库,或者我是否在我的代码中做了一些绞尽脑汁的事情。有人可以帮忙吗?
我不确定你想用这条线做什么
const wrapper = shallow(<P/>, { attach: true });
但是根据 Enzymes 文档 (http://airbnb.io/enzyme/docs/api/shallow.html) shallow 的第二个参数应该是一个对象,它带有要传递给组件的上下文。
如果您试图将其作为 prop 传递到您的组件中,您应该像这样编写浅层声明:
const wrapper = shallow(<P attach={ true } />);
如果您
,您正在错误地导入 P
组件 way.So
export class T extends React.Component{}
那么导入应该是
import { T } from "../../src/app/components/T";
...
shallow(<T attach={ true } />);
看看这个article
它会对你有用。
HTH
我是 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)
我不知道我是否遗漏了任何库,或者我是否在我的代码中做了一些绞尽脑汁的事情。有人可以帮忙吗?
我不确定你想用这条线做什么
const wrapper = shallow(<P/>, { attach: true });
但是根据 Enzymes 文档 (http://airbnb.io/enzyme/docs/api/shallow.html) shallow 的第二个参数应该是一个对象,它带有要传递给组件的上下文。
如果您试图将其作为 prop 传递到您的组件中,您应该像这样编写浅层声明:
const wrapper = shallow(<P attach={ true } />);
如果您
,您正在错误地导入P
组件 way.So
export class T extends React.Component{}
那么导入应该是
import { T } from "../../src/app/components/T";
...
shallow(<T attach={ true } />);
看看这个article
它会对你有用。
HTH