Тест пасты в кипарисе в reactjs проекте

Question

Есть идеи, как смоделировать Вставить действие в Cypress в связке с React?

Мой тест должен проверить значение сразу после действия вставки.

Я нашел несколько решений , основанных на манипулировании DOM, потому что, как говорят авторы, он вставляет изменения непосредственно в поле ввода DOM, а затем вызывает change событие ,

Мои попытки cy.get(selector).invoke('val', 'copy-pasted text').trigger('change');

Эти решения работают не так, как ожидалось, поскольку React манипулирует DOM самостоятельно, поэтому «вставка» предлагаемыми способами направляет изменения непосредственно во входные значения и нарушает рабочий процесс React.

Спасибо

Answer 1

Библиотека React Testing запустит событие изменения в приложении React.

Ссылка Как вызвать событие изменения на переключателях в библиотеке реагирования-тестирования

Для удобства я обернул его в пользовательскую команду Cypress.
Кажется элемент хочет сфокусироваться первым.

import { fireEvent } from "@testing-library/react";

Cypress.Commands.add('fireEvent', {prevSubject: true}, (element, event, value) => {
  element.focus()
  fireEvent[event](element[0], { target: { value } });
})
...

it('fires change event', () => {
  cy.get(selector).fireEvent('change', 'copy-pasted text');
  /* 
    Test react re-render effects here with re-tryable commands,
    e.g should(), not expect()
  */
});

Это тест на вставку?

Существует событие вставки , так что, возможно, ' изменить "на самом деле не тестирование сценария. Есть ли разница между набором текста и вставкой? Вернемся к этому.

Кстати, я использую

cy.get(selector).focus().clear().type('copy-pasted text');

без проблем.

Единственное предупреждение, как и выше, последующие команды должны быть повторяемые , чтобы дать Время реакции для обработки (или добавить cy.wait(100)).