reactjs 如何测试一个跨度是否包含一些来自挂载快照的特定文本？

8fq7wneg 于 2022-12-12 发布在 React

关注(0)|答案(3)|浏览(80)

我正在测试一个没有任何ID的组件，以便能够从Jest中进行选择，我的已装载组件快照将如下所示

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

那么，有没有什么方法可以验证快照中span内的文本是否包含world 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

来源：https://stackoverflow.com/questions/61374534/react-jest-how-to-test-if-a-span-contains-some-certain-text-from-mount-snapshot

3条答案

按热度按时间

2cmtqfgy1#

find返回一个类似mount的ReactWrapper，因此可以链接find调用。
比如说，像这样的东西。

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

赞(0）回复(0）举报 2022-12-12

6tdlim6h2#

我们可以使用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元素并对其进行测试。

赞(0）回复(0）举报 2022-12-12

8iwquhpp3#

在这个例子中，我们使用了一个简单的方法来调用这个函数。在这个例子中，我们使用了一个简单的方法来实现这个功能。

赞(0）回复(0）举报 2022-12-12