Question

使用酶，我试图测试组件的渲染文本。该组件是LinkButton，它会像这样呈现出来：

<a><button to="/projects">See list of all projects</button></a>

我不确定如何直接引用字符串＆＃34;查看所有项目的列表＆＃34;。我目前正在测试它如下：

let { link } = setup({ type: 'Project' })
link = link.shallow()

const text = link.prop('children').props.children.join('')
expect(link.prop('to')).to.eq('/projects')
expect(text).to.eq('See list of all projects')

link来自shallow(<NotFoundCard />).find(LinkButton)。

我尝试使用link.find('button')和link.find('a')，但都返回0个节点。

编辑1

setup的代码：

const setup = propOverrides => {
  const props = Object.assign({
    children: null,
    type: 'None',
  }, propOverrides)

  const wrapper = shallow(<NotFoundCard {...props} />)

  return {
    props,
    wrapper,
    card: wrapper.find(Card),
    title: wrapper.find(CardTitle),
    text: wrapper.find(CardText),
    link: wrapper.find(LinkButton),
  }
}

Answer 1

我认为正确的方法是检查按钮元素是否已经传递了具有您想要的值的道具children。

此测试通过（使用chai-enzyme）

describe('Link', () => {
  it('should have text', () => {
    const Link = () => (
      <a>
        <button to="/projects">See list of all projects</button>
      </a>
    );

    const wrapper = shallow(<Link />);
    expect(wrapper.find('button')).to.have.prop(
      'children',
      'See list of all projects'
    );
  });
});

如何在酶中测试子元素的文本？

1 个答案: