reactjs - React Jest 如何测试跨度是否包含来自挂载快照的某些文本？

Question

我正在测试一个没有任何 id 以便我能够从 Jest 中选择的组件，我安装的组件快照将类似于

<div id='divHeader'>
    <h2
      className=""
      style={Object {}}
    >
      <span
        className=""
        style={Object {}}
      >
        This is an English text
      </span>
    </h2>
</div>

那么有什么方法可以让我验证快照中的跨度内的文本是否包含世界English，例如

widget = mount(<MyComponent {...defaultProp} />);
// widget.find('span').text.contains('English')   
// widget.find('[id="divHeader"]').h2.span.text.contains('English')

我在find这里遇到了一些麻烦，我知道它可以通过 id 找到元素，但不幸的是我无法为我的 span 分配任何 id，即使我可以通过 id 找到我的 div，我也无法选择它的子元素，如 div-> h2->跨度...

Answer 1

find 返回一个ReactWrapper类似的挂载，因此您可以链接 find 调用。

例如，像这样的东西。

widget.find('[id="divHeader"]').find('h2').find('span').text().contains('English')

Answer 2

我们可以使用 Jest 和 Enzyme 进行测试：

import { shallow } from 'enzyme';

const widget = shallow(<MyComponent {...defaultProp} />);

expect(widget.find('#divHeader').find('h2').find('span').text().contains('This is an English text')).toBe(true);

否则，您可以通过 Selector 直接找到该特定 HTML 元素并对其进行测试。