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

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

Теперь у меня работает этот тест, находя текст с экрана, но я хочу указать его по 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
});
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
4 748
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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

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

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

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

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

Спасибо! Я немного изменил ваш образец, чтобы заставить его работать. Теперь у меня есть только один элемент li, и на него уходит сэкономленное время. Поэтому я сделал это так screen.getByText(/00:01:00/i, {selector: 'li'}).

Joko Joko 14.12.2020 09:02

Другие вопросы по теме