React Jest 如何测试跨度是否包含挂载快照中的某些特定文本？

Question

我正在测试一个没有任何 id 的组件，以便我能够从 Jest select，我安装的组件快照将像

<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，甚至我可以找到我的 div 通过 id，我不能 select 它的子元素，如 div->h2->span...

Answer 1

找到 returns 一个 ReactWrapper 类似的挂载，这样你就可以链式查找调用。

例如，像这样的东西。

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

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

React Jest 如何测试跨度是否包含挂载快照中的某些特定文本？

React Jest how to test if a span contains some certain text from mount snapshot?

reactjs

jestjs

enzyme

react-test-renderer