Кипарис не может найти текстовую область Material-UI

Question

Я создаю приложение React.Я использую Material-UI версии 3.9.3 для своих компонентов и Cypress с Cypress Testing Library для моих тестов E2E.

У меня есть многострочный <TextField />, для которого я хочу написать несколько тестов.Когда вы передаете multiline реквизит TextField, он по какой-то причине рендерит три тега textarea.Один из них имеет видимость скрытого, но все еще содержит значение.Есть также видимый, содержащий значение, но ниже в дереве.

<TextField
  id="outlined-name"
  label="Name"
  className={classes.textField}
  value={this.state.name}
  onChange={this.handleChange('name')}
  margin="normal"
  variant="outlined"
  multiline={true}
/>

Когда я пытаюсь нацелить его с помощью кипарисовых тестов, они терпят неудачу, потому что говорят, что элемент не видим:

it('inputs some new values but resets them', () => {
  cy.visit('/');
  cy.getByDisplayValue(/lena/i).type('{backspace}nard');
  cy.getByDisplayValue(/inner five/i).select('Distants');

  cy.queryByDisplayValue(/lena/i).should('not.exist');
  cy.getByDisplayValue(/lennard/i).should('exist');

  cy.getByText(/saving/i).should('exist');

  cy.getByDisplayValue(/lena/i).should('exist');
  cy.queryByDisplayValue(/lennard/i).should('not.exist');
  cy.getByText(/saved/i).should('exist');
});

Броски:

Error:       CypressError: Timed out retrying: cy.type() failed because this element is not visible:

<textarea aria-hidden="true" class="MuiPrivateTextarea-textarea-221 MuiPrivateTextarea-shadow-222" readonly="" rows="1" tabindex="-1">Lena</textarea>

This element '<textarea.MuiPrivateTextarea-textarea-221.MuiPrivateTextarea-shadow-222>' is not visible because it has CSS property: 'visibility: hidden'

Fix this problem, or use {force: true} to disable error checking.

Как пройти этот тест, но при этом предоставить достоверную информацию?

Answer 1

У вас есть пара основных вариантов. Один из вариантов - в первую очередь использовать getByLabelText, чтобы получить элемент. Метка привязана к соответствующему, видимому элементу из трех, поэтому она работает надежно. Затем просто проверьте значение текстовой области, а не используйте значение для получения элемента.

Пример:

    it('inputs some new values but resets them', () => {
        cy.visit('https://50wv5x5p1x.codesandbox.io/');
        cy.getByLabelText("Name").invoke("val").should("eq", "lena");
        cy.getByLabelText("Name").type('{backspace}nard');
        cy.getByLabelText("Name").invoke("val").should("eq", "lennard");
    });

Другой вариант - использовать версию 4 Material-UI. первая бета-версия была выпущена сегодня, а первая стабильная версия намечена на середину мая. Текстовые области были полностью переработаны в v4 и больше не отображают две скрытые текстовые области, поэтому следующее просто работает:

    it('inputs some new values but resets them', () => {
        cy.visit('https://6lj3ymm9qw.codesandbox.io/');
        cy.getByDisplayValue(/lena/i).type('{backspace}nard');
        cy.queryByDisplayValue(/lena/i).should('not.exist');
        cy.getByDisplayValue(/lennard/i).should('exist');
    });