React Testing - получить текст внутри элемента

Я пишу пару тестов для своего приложения. Хочу проверить, что после экономии времени он попадает в список.

Теперь я получил этот тест, найдя текст на экране, но я хочу указать его по идентификатору. Я хочу убедиться, что этот 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
});

reactjs react-testing-library
person Joko Joko    schedule 13.12.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Вы можете использовать это свойство селектора внутри объекта параметров для выбора элемента. Так что можно написать что-то вроде этого.

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

Вы можете проверить, есть ли у элемента нужный идентификатор, после того, как получите его по тексту.

const element = screen.getByText(/00:01:00/i);
expect(element).toHaveAttribute('id', "someId");
person Marin Radmilović    schedule 13.12.2020
comment
Спасибо! Я немного изменил ваш образец, чтобы он заработал. Теперь у меня есть только один элемент li, и вот где уходит сэкономленное время. Так я и сделал это screen.getByText(/00:01:00/i, {selector: 'li'}). - person Joko Joko; 14.12.2020