[英]Test that a component does not render when passed a certain prop value with enzyme
I am wanting to test if my LoadingIndicator component loads into the DOM when the status property is set to FETCHING and doesn't load when it is READY. 我想测试当status属性设置为FETCHING时我的LoadingIndicator组件是否加载到DOM中,而当它为READY时不加载。 Right now I have this:
现在我有这个:
import React from 'react';
import { assert } from 'chai';
import { shallow, mount } from 'enzyme';
import LoadingIndicator from '../../src/components/LoadingIndicator';
import { STATUSES } from '../../src/reducers/status';
describe('LoadingIndicator', () => {
it('should render when the status is FETCHING', () => {
const wrapper = shallow(<LoadingIndicator status={STATUSES.FETCHING} />);
assert.ok(wrapper);
});
it('should not render when the status is READY', () => {
const wrapper = mount(<LoadingIndicator status={STATUSES.READY} />);
assert.isNotOkay(wrapper);
});
});
The component itself looks like this: 组件本身看起来像这样:
import React, { PropTypes } from 'react';
import CircularProgress from 'material-ui/CircularProgress';
import { STATUSES } from '../reducers/status';
import '../styles/LoadingIndicator.scss';
export default class LoadingIndicator extends React.Component {
render() {
return (
this.props.status === STATUSES.READY ? null :
<div className="loader-div">
<CircularProgress className="loader" />
</div>
);
}
}
LoadingIndicator.propTypes = {
status: PropTypes.string.isRequired,
};
This doesn't seem to be the correct way to check if it renders or not though, I get 这似乎不是检查它是否渲染的正确方法,我知道
1) LoadingIndicator should not render when the status is READY:
AssertionError: expected { Object (component, root, ...) } to be falsy
Any idea how I can properly test if this component loads depending on the property it is given? 知道如何根据给定的属性正确测试此组件是否加载吗?
Thanks. 谢谢。
Hi so I ended up figuring this out myself. 嗨,我最终自己弄清楚了这一点。 I should have thought about the fact that since I'm doing a shallow render, I am able to just look if the div renders or not, so I end up with:
我应该考虑以下事实:由于我正在执行浅层渲染,因此我可以只查看div渲染与否,因此最终得到:
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import LoadingIndicator from '../../src/components/LoadingIndicator';
import { STATUSES } from '../../src/reducers/status';
describe('LoadingIndicator', () => {
it('should render when the status is FETCHING', () => {
const wrapper = shallow(<LoadingIndicator status={STATUSES.FETCHING} />);
expect(wrapper.find('div')).to.have.length(1);
});
it('should not render when the status is READY', () => {
const wrapper = shallow(<LoadingIndicator status={STATUSES.READY} />);
expect(wrapper.find('div')).to.have.length(0);
});
});
and that works (tested for both positive/negative on both). 并且有效(同时测试了两者的正/负)。
You could check The Component Lifecycle . 您可以检查组件生命周期 。 Especially
shouldComponentUpdate()
. 特别是
shouldComponentUpdate()
。
From that, you can simple add 由此,您可以简单地添加
shouldComponentUpdate(nextProps, nextState) {
if (...) {
return true;
}
else {
return false;
}
}
to decide if render this component. 决定是否渲染此组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.