在 reactjs 项目中的 cypress 中粘贴测试

Question

任何想法如何在 Cypress 中与 React 捆绑模拟 粘贴 动作？

我的测试应该在粘贴操作后立即检查值。

我发现很少有基于 DOM 操作的 solutions，因为正如作者所说，它将更改 直接 粘贴到 DOM 输入字段，然后引发 change 事件。

我试过cy.get(selector).invoke('val', 'copy-pasted text').trigger('change');

这些解决方案无法按预期工作，因为 React 会自行操作 DOM，因此通过建议的方式“粘贴”会将更改直接推送到输入值并违反 React 工作流程。

谢谢

Answer 1

我认为这段代码可以帮助你：

添加到命令：

Cypress.Commands.add("paste", { prevSubject: true }, (selector, pastePayload) => {
  // https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event
  cy.wrap(selector).then($destination => {
    const pasteEvent = Object.assign(new Event("paste", { bubbles: true, cancelable: true }), {
      clipboardData: {
        getData: () => pastePayload
      }
    });
    $destination[0].dispatchEvent(pasteEvent);
  });
});

用法：

cy.getByTestId("some-input-test-id").paste('some text');

此示例与 Internet 上的其他示例之间的主要区别在于，您的插件在捕捉“真正”粘贴的内容时可能会遇到问题。因此，即blueprint 中的回调onItemsPaste 不会捕获任何东西。 Original版本。

Answer 2

React Testing Library 将在 React 应用程序中触发更改事件。

参考How do I trigger a change event on radio buttons in react-testing-library

为方便起见，我将其包装在赛普拉斯自定义命令中。
似乎该元素希望首先获得焦点。

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()
  */
});

这是粘贴测试吗？

有一个paste event，所以也许“改变”并没有真正测试场景。打字和粘贴有区别吗？会回到这个。

顺便说一句，我使用

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

没有问题。

如上所述，唯一需要注意的是，后续命令必须是可重试，以给 React 处理时间（或添加 cy.wait(100)）。