在reactjs项目中粘贴cypress测试

Question

有什么想法如何在 Cypress 中与 React 捆绑在一起模拟粘贴操作吗？

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

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

我试过的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');

此示例与互联网上的其他示例之间的主要区别在于，您的插件可能无法捕获“真正”粘贴的内容。所以蓝图onItemsPaste中的ie 回调不会捕获任何内容。原始版本。

Answer 2

React 测试库将触发 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');

没有问题。

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