Я использую DOM Testing Library, а не React Testing Library, но для первого тега не было, поэтому я использовал последний, потому что это, кажется, самое близкое соответствие. Надеюсь, что все в порядке.
У меня есть форма аутентификации, кнопка отправки которой содержит текст «Войти», а страница также содержит заголовок с таким же содержанием:
Как видно на снимке экрана, я фактически изменил заголовок на «Admin Log In», потому что это (по крайней мере временно) решает проблему.
I ' Вы написали мой тест следующим образом:
import { getByPlaceholderText, getByText } from '@testing-library/testcafe';
const testHostname = process.env.TEST_HOST || 'https://redacted-qa-server';
fixture`Admin Auth`.page`${testHostname}/admin/`;
test('authentication works for a known account', async t => {
await t
.typeText(getByPlaceholderText('E-mail address'), username)
.typeText(getByPlaceholderText('Your password'), password)
.click(getByText('Log in'));
const location = await t.eval(() => window.location);
await t.expect(location.pathname).notContains('/login');
});
Стоит отметить, что в настоящее время и заголовок, и кнопка отправки в настоящее время используют CSS для оформления текста как всех заглавных букв, но оба кодируются с использованием case "Log in".
Если изменить содержимое заголовка на «Admin» и использовать точность точного соответствия в getByText, этот тест можно будет пройти. Но что, если я не хочу включать префикс «Admin» в заголовок?
Я знаю, что могу использовать совпадение с регулярным выражением, например getByText(/^log in$/i), без учета регистра, но не разрешать подстроки, но это не решить проблему «Я не хочу сохранять префикс администратора».
Я знаю, что могу использовать getAllByText, чтобы получить массив совпадений, и могу просто знать, какое из них Я хочу щелкнуть ... но это кажется go вопреки духу DOM Testing Library. Есть ли благословенное решение этой проблемы?