Question

I'm trying to write a mocha测试的React组件。基本上，组件需要呈现＆lt; a＆gt;。标记，其href设置为传入的属性中的值。问题是组件可以呈现多个＆lt; a＆gt;标签以不可预测的顺序排列，其中只有一个必须具有正确的href。

我正在使用enzyme，chai和chai-enzyme

以下是我的实际代码的缩减版本，但两个测试都没有通过：

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

Answer 1

事实证明我正在接近这个错误。而不是尝试使表达式的断言部分与查询的多个结果一起使用，最好将查询更改为更具体。可以以与jQuery类似的方式使用属性过滤器。因此，我的测试变成了这样：

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.find(`a[href="${myHref}"]`)).be.present();
  });
});

如何针对React组件声明具有多个<a> tags has an </a> <a> tag with a given href

1 个答案: