由网友(亡城旧梦)分享简介:我在Reaction测试库中使用getByTestId函数:const button = wrapper.getByTestId("button");expect(heading.textContent).toBe("something");是否可以/建议改为搜索HTML元素?所以大概是这样的:const but...![如何利用Vue.js库中的v html指令添加html元素](https://p.xsw88.cn/allimgs/daicuo/20230903/4817.png)
我在Reaction测试库中使用getByTestId
函数:
const button = wrapper.getByTestId("button");
expect(heading.textContent).toBe("something");
是否可以/建议改为搜索HTML元素?所以大概是这样的:
const button = wrapper.getByHTML("button");
const heading = wrapper.getByHTML("h1");
推荐答案
![如何利用Vue.js库中的v html指令添加html元素](https://p.xsw88.cn/allimgs/daicuo/20230903/4817.png)
我不确定wrapper
在这种情况下是什么。但回答你的两个问题:是的,可以通过HTML元素获取,而不是,这是不可取的。
您可以这样做:
// Possible but not advisable
const { container } = render(<MyComponent />)
// `container` is just a DOM node
const button = container.querySelector('button')
因为您得到了一个DOM节点,所以您可以使用所有普通的DOM API,如querySelector
。
现在,为什么这不可取。反应测试库的一大卖点是,您可以像用户一样测试组件。这意味着不依赖于实现细节。例如,您无法直接访问组件的状态。
以这种方式编写测试有点困难,但允许您编写更健壮的测试。
在您的例子中,我认为底层的HTML是一个实现细节。如果您更改了您的HTML结构,使h1
现在是h2
或div
,会发生什么?测试将会失败。如果改为按文本查看这些元素,则标记将变得无关紧要。
在某些情况下,普通的查询帮助器是不够的。对于这些事件,您可以使用data-testid
和getByTestId
。
相关推荐
最新文章