私はEnzyme/Jestを使用してテストしようとしているReactコンポーネントがあります。私は、コンポーネントがレンダリングされたことを確認するために最も適切なテストが何であるかを理解しようとしています。Reactコンポーネントがレンダリングされているかどうかのテスト
私のコンポーネントは、shouldRender
のプロップを持っています。これがfalseの場合、コンポーネントはレンダリングされません。私のコンポーネントは、次のようになります。コンポーネントがレンダリングされていないとして、
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.
});
});
は、私は2番目のテストが失敗したい:私はこのようになりますテストを持って
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;
。コンポーネントがレンダリングされているかどうかをテストする良い方法はありますか?
必要に応じてさらに情報を提供してください。
ありがとうございます!
ただの通知。 'render'からundefinedを返すドキュメントによると、有効なオプションではありません。 "レンダリングしたくないことを示すために' null'または 'false'を返すこともできます。 –
Woops - もっと簡単なバージョンのために現場で手作業でコンポーネントを書きました - コードを修正します今。ありがとう! –
ところで、isEmptyメソッドがあります。 https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/isEmpty.md –