React 测试 - 获取元素内的文本

Question

我正在为我的应用编写几个测试。我想看看节省时间后，它进入列表。

现在我通过从屏幕上找到一个文本来让这个测试工作，但我想通过 id 来指定它。我的意思是检查这个 00:01:00 是否真的在正确的位置，而不仅仅是页面上的某个地方。希望大家明白我的意思。

我该怎么做？

这是通过从屏幕上查找来工作的：

test("Time saved", async () => {
  render(<SecondTimer />);

  const start = screen.getByText("START");
  fireEvent.click(start);

  await waitFor(() => screen.getByText(/00:01:00/i), {
    timeout: 2000
  });

  const pause = screen.getByText("PAUSE");
  fireEvent.click(pause); 

  const saveTime = screen.getByText("SAVE TIME"); 
  fireEvent.click(saveTime); 

  const history = screen.queryByText(/00:01:00/i);

  screen.debug(); // printtaa renderinnin consoliin
});

我有 DIV 这样的：

<div data-testid={'aikalista'} className={'tulostaulu'}>
            <ul>
              {this.state.aikoja === false && ('No times my friend!')}
              {this.state.aikoja === true && (<div>{this.state.history.map((item, index) => <li key={index}>{item}</li>)}</div>)}
            </ul>

这是我尝试过的不同变体，但没有成功。

test("Time saved v2", async () => {
  render(<SecondTimer />);

  const start = screen.getByText("START");
  fireEvent.click(start);

  await waitFor(() => screen.getByText(/00:01:00/i), {
    timeout: 2000
  });

  const pause = screen.getByText("PAUSE");
  fireEvent.click(pause); 

  const saveTime = screen.getByText("SAVE TIME"); 
  fireEvent.click(saveTime); 

  const aikalista = screen.getByTestId('aikalista');
  expect(getByTestId('aikalista').textContent).toEqual(/00:01:00/i)



  screen.debug(); // printtaa renderinnin consoliin
});

Answer 1

getByText 有这个签名。

getByText(
  container: HTMLElement, // if you're using `screen`, then skip this argument
  text: TextMatch,
  options?: {
    selector?: string = '*',
    exact?: boolean = true,
    ignore?: string|boolean = 'script, style',
    normalizer?: NormalizerFn,
  }): HTMLElement

您可以在选项对象中使用 select 或属性到 select 元素。所以你可以这样写。

screen.getByText(/00:01:00/i, {selector: "#someId"})

您也可以在通过文本获取元素后检查元素是否具有您想要的id。

const element = screen.getByText(/00:01:00/i);
expect(element).toHaveAttribute('id', "someId");

React 测试 - 获取元素内的文本

React Testing - get text inside an element

reactjs

react-testing-library