0

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);
  });
});
4

1 に答える 1