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

【问题标题】：React Jest how to test if a span contains some certain text from mount snapshot?React Jest 如何测试跨度是否包含来自挂载快照的某些文本？
【发布时间】：2022-01-04 01:15:21
【问题描述】：

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

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

那么有什么方法可以让我验证快照中我的 span 内的文本是否包含世界 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->span...

【问题讨论】：

标签： reactjs jestjs enzyme react-test-renderer

【解决方案1】：

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

例如，像这样的。

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

【讨论】：

太棒了！不知何故，text 对我不起作用，我必须使用....find('span').props().children，它给了我内部 html 文本，这是预期的吗？ find('span') 将返回 ReactWrapper，当我执行 console.log(...find('span')) 时我不知道里面是什么
啊文本是一个函数而不是一个道具值。。文本（）。 find 返回一个 ReactWapper 而不是一个 domnode。
调试也很有帮助。 console.log(wrap.find(...).debug())

【解决方案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 元素并对其进行测试。

【讨论】：