RTL中的getByText和screen.getByText有什么区别

Question

我是React-Testing-Library 的新手，在网上找到了几个使用view.getByText('Greeting')and的例子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或，这会导致它默认为.baseElementrenderdocument.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
});

你应该使用哪一个

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

有用的链接

• 为什么你应该使用屏幕
• 屏幕文档
• 渲染选项