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