英文:
What's the difference between getByText vs findByText vs queryByText in testing-library?
问题
有多种方法可以获取元素的文本内容：getByText、findByText 和 queryByText。有时候我会对该使用哪一个感到困惑。我在react-native中有以下示例：
it('should render children', () => {
const mockedChildComponentTxt = 'Children are rendered';
const { getByText, findByText, queryByText } = render(
<MyProvider>
<div>{mockedChildComponentTxt}</div>
</MyProvider>,
);
expect(queryByText(mockedChildComponentTxt)).toBeTruthy()
});
queryByText 和 getByText 失败了，但 findByText 可以正常工作。
debug() 结果如下：
<RNCSafeAreaView
onInsetsChange={[Function anonymous]}
style={
Object {
"flex": 1,
}
}
>
<div>
Children are rendered
</div>
</RNCSafeAreaView>
为什么在上面的示例中 findByText 能正常工作，但 getByText 和 queryByText 失败了？
英文:
There are multiple ways of getting an element's text content: getByText vs findByText vs queryByText.<br> Sometimes I get confused about which one to use.<br> I have the following example in react-native:
it('should render children', () => {
const mockedChildComponentTxt = 'Children are rendered';
const { getByText, findByText, queryByText } = render(
<MyProvider>
<div>{mockedChildComponentTxt}</div>
</MyProvider>,
);
expect(queryByText(mockedChildComponentTxt)).toBeTruthy()
});
queryByText and getByText are failing, but findByText works.
debug() resulting in:
<RNCSafeAreaView
onInsetsChange={[Function anonymous]}
style={
Object {
"flex": 1,
}
}
>
<div>
Children are rendered
</div>
</RNCSafeAreaView>
Why findByText works in the above example, but getByText and queryByText fail?
答案1
得分: 3
findBy
findBy查询返回一个承诺（promise），当找到匹配的元素时会解析该承诺。如果没有找到元素或者在默认的1000毫秒超时后找到多个匹配项，则该承诺会被拒绝。如果您需要找到多个元素，请使用findAllBy。
getBy
getBy查询返回查询的第一个匹配节点，并且如果没有找到元素或者找到多个匹配项，则抛出错误。如果您需要找到多个元素，请使用getAllBy。
queryBy
queryBy查询返回查询的第一个匹配节点，并且如果没有找到元素，则返回null。这对于断言不存在的元素非常有用。如果找到多个匹配项，它会抛出错误（请改用queryAllBy）。
在您的示例中，渲染的组件包含文本“Children are rendered”，但似乎该文本可能不会立即出现在DOM中。可能是元素在渲染后以异步方式添加到DOM中，这就是为什么getByText和queryByText无法立即找到它的原因。但是，findByText有效，因为它会等待元素出现在DOM中，这是因为它是异步的。
findBy查询返回一个承诺（promise），当找到匹配的元素时解析该承诺。
并且当它找到元素时，测试通过。
英文:
findBy
>findBy queries return a promise which resolves when a matching element is found. The promise is rejected if no elements match or if more than one match is found after a default timeout of 1000 ms. If you need to find more than one element, then use findAllBy.
getBy
>getBy queries return the first matching node for a query, and throw an error if no elements match or if more than one match is found. If you need to find more than one element, then use getAllBy.
queryBy
>queryBy queries return the first matching node for a query, and return null if no elements match. This is useful for asserting an element that is not present. This throws if more than one match is found (use queryAllBy instead).
Here in your example the rendered component contains the text "Children are rendered," but it seems that it might not be available in the DOM immediately.<br>
it's possible that the element is added to the DOM asynchronously after rendering, which is why getByText and queryByText are not able to find it immediately. however, findByText works because it waits for the element to appear in the DOM due to its asynchronous nature
>findBy queries return a promise which resolves when a matching element is found.
and when it finds the element, the test passes.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论