如何断言具有多个 <a> 标签的 React 组件有一个带有给定 href 的 <a> 标签

Question

我正在尝试为 React 组件编写 mocha 测试。基本上，组件需要渲染一个标签，其 href 设置为传入的属性中的值。问题是组件可以以不可预测的顺序渲染多个标签，并且只能渲染一个其中必须有正确的 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);
  });
});

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

如何断言具有多个 <a> 标签的 React 组件有一个带有给定 href 的 <a> 标签

How to assert a React component with multiple <a> tags has an <a> tag with a given href

reactjs

mocha.js

chai

enzyme

chai-enzyme