react-testing-library - RTL中的getByText和screen.getByText有什么区别

Question

我是新来的 React-Testing-Library并在网上找到了几个使用 view.getByText('Greeting') 的人的例子。和 screen.getByText('Greeting') ，就像下面的代码一样。
它们之间有什么区别吗？

    import React from 'react'
    import { render, screen } from '@testing-library/react'
    import '@testing-library/jest-dom/extend-expect'
    import { App } from "./App";
    
    test("render the correct context", ()=>{
      const view = render(<App />);
      view.getByText("Greeting");
      screen.getByText("Greeting");
    });

谁能详细告诉我？

Answer 1

TLDR；他们是 经常 同样的事情。
区别getByText会在baseElement里面查询screen.getByText会在document.body里面查询
我们通常不指定自定义 container或 baseElement内render函数，这会导致它默认为 document.body .
因此 getByText和 screen.getByText -- 或任何其他查询 -- 通常是可以互换的。

import { render, screen } from '@testing-library/react'

test("render the correct context", ()=>{
  const { getByText } = render(<App />, { baseElement });
  getByText("Greeting"); // queries inside baseElement (which usually means document.body)
  screen.getByText("Greeting"); // queries inside document.body
});

你应该使用哪一个
我认为这并不重要，无论哪种方式你都应该没事。也就是说，库的创建者 advocates for screen并且还提到你应该避免使用 container或 baseElement渲染选项。

有用的链接

why you should use screen

screen docs

render options