React コンポーネントのモカテストを作成しようとしています。基本的に、コンポーネントは、渡されたプロパティの値に設定された href を使用して <a> タグをレンダリングする必要があります。問題は、コンポーネントが複数の <a> タグを予測できない順序でレンダリングできることです。正しいhrefを持っています。
以下は私の実際のコードの縮小版ですが、どちらのテストもパスしていません:
const TestComponent = function TestComponent(props) {
const { myHref } = props;
return (
<div>
<a href="http://example.com">Link 1</a><br />
<a href={myHref}>Link 2</a><br />
<a href="http://example.com">Link 3</a>
</div>
);
};
TestComponent.propTypes = {
myHref: React.PropTypes.string.isRequired
};
describe('<TestComonent />', () => {
it('renders link with correct href', () => {
const myHref = 'http://example.com/test.htm';
const wrapper = Enzyme.render(
<TestComponent myHref={myHref} />
);
expect(wrapper).to.have.attr('href', myHref);
});
it('renders link with correct href 2', () => {
const myHref = 'http://example.com/test.htm';
const wrapper = Enzyme.render(
<TestComponent myHref={myHref} />
);
expect(wrapper.find('a')).to.have.attr('href', myHref);
});
});