测试 React 组件是否已经渲染
Test whether React component has rendered
我有一个 React 组件,我正在尝试使用 Enzyme/Jest 对其进行测试。我试图弄清楚最合适的测试是什么以确保组件已呈现。
我的组件有一个属性 shouldRender
,如果该属性为 false,将导致组件不呈现。我的组件如下所示:
import React from 'react';
const propTypes = {
shouldRender: React.PropTypes.bool,
};
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
foo: 'bar',
};
}
render() {
if (!this.props.shouldRender) {
return null;
}
return (
<div>
<span>My component</span>
</div>
);
}
}
MyComponent.propTypes = propTypes;
export default MyComponent;
我有一个看起来像这样的测试:
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from '../MyComponent';
describe('MyComponent', () => {
it('Should render if we want it to', () => {
const component = shallow(<MyComponent shouldRender />);
expect(component).toBeDefined(); // Passes
});
it('Should not render if we do not want it to', () => {
const component = shallow(<MyComponent />);
expect(component).not.toBeDefined(); // Does not pass, as component isn't undefined.
});
});
我希望第二个测试失败,因为组件未呈现。有没有更好的方法来测试组件是否已呈现?
如果需要,很乐意提供更多信息。
谢谢!
所以我和一些人聊了聊,我决定也许我的做法是错误的。
确定这是否由父组件渲染可能是一个更好的主意,否则任何时候我想使用 MyComponent
,我将不得不传递这个 shouldRender
属性进去。
MyComponent
现在看起来像这样:
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
foo: 'bar',
};
}
render() {
return (
<div>
<span>My component</span>
</div>
);
}
}
MyComponent.propTypes = propTypes;
export default MyComponent;
使用 MyComponent
的 和 MyParentComponent
看起来像这样:
import React from 'react';
const propTypes = {
myComponent: React.PropTypes.bool,
};
class MyParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
boz: 'baz',
};
}
render() {
return (
<div>
{ this.props.myComponent &&
<MyComponent />
}
</div>
);
}
}
export default MyComponent;
不仅允许 MyComponent
更可重用,它还消除了我想要完全编写的测试的需要。感谢所有看过这篇文章的人。
我认为 Jest 的快照测试正是您所需要的。使用快照测试,当测试失败时,您可以检查它是有意还是无意的更改。查看他们的示例 here
我有一个 React 组件,我正在尝试使用 Enzyme/Jest 对其进行测试。我试图弄清楚最合适的测试是什么以确保组件已呈现。
我的组件有一个属性 shouldRender
,如果该属性为 false,将导致组件不呈现。我的组件如下所示:
import React from 'react';
const propTypes = {
shouldRender: React.PropTypes.bool,
};
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
foo: 'bar',
};
}
render() {
if (!this.props.shouldRender) {
return null;
}
return (
<div>
<span>My component</span>
</div>
);
}
}
MyComponent.propTypes = propTypes;
export default MyComponent;
我有一个看起来像这样的测试:
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from '../MyComponent';
describe('MyComponent', () => {
it('Should render if we want it to', () => {
const component = shallow(<MyComponent shouldRender />);
expect(component).toBeDefined(); // Passes
});
it('Should not render if we do not want it to', () => {
const component = shallow(<MyComponent />);
expect(component).not.toBeDefined(); // Does not pass, as component isn't undefined.
});
});
我希望第二个测试失败,因为组件未呈现。有没有更好的方法来测试组件是否已呈现?
如果需要,很乐意提供更多信息。
谢谢!
所以我和一些人聊了聊,我决定也许我的做法是错误的。
确定这是否由父组件渲染可能是一个更好的主意,否则任何时候我想使用 MyComponent
,我将不得不传递这个 shouldRender
属性进去。
MyComponent
现在看起来像这样:
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
foo: 'bar',
};
}
render() {
return (
<div>
<span>My component</span>
</div>
);
}
}
MyComponent.propTypes = propTypes;
export default MyComponent;
使用 MyComponent
的 和 MyParentComponent
看起来像这样:
import React from 'react';
const propTypes = {
myComponent: React.PropTypes.bool,
};
class MyParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
boz: 'baz',
};
}
render() {
return (
<div>
{ this.props.myComponent &&
<MyComponent />
}
</div>
);
}
}
export default MyComponent;
不仅允许 MyComponent
更可重用,它还消除了我想要完全编写的测试的需要。感谢所有看过这篇文章的人。
我认为 Jest 的快照测试正是您所需要的。使用快照测试,当测试失败时,您可以检查它是有意还是无意的更改。查看他们的示例 here