AceEditor setValue() 没有触发我的 React App 的 onChange 函数

Question

我正在使用 Cypress.io 在我的 React 应用程序上进行测试。我正在我的一个组件中使用 Ace 编辑器。我正在使用 onChange 函数根据 Ace 编辑器的值/数据设置变量的值，这样我就可以验证用户是否在编辑器中输入了某些内容。

我面临的问题是，当我执行 editor.setValue 时，它不会触发我的 onChange 函数，因此它没有设置变量的值，然后验证失败。

这是我设置Ace编辑器的值/数据的测试。

it("Enter Template Data", () => {
 window.cy.get('#aceEditor').then((ele) => {
   const editor = ace.edit(ele[0]);
   editor.setValue("Some Text");
 });
});

我用 Ace 编辑器的数据设置了一个名为 data 的变量，当我在 Ace 编辑器中手动输入数据时，该变量通常有效，但当我使用"editor.setValue"设置值时不起作用。

如何使用 Cypress 在 Ace 编辑器中输入数据，同时在我的组件中触发我的 onChange 函数？

Answer 1

您可以使用

cy.trigger()在元素上手动调度 DOM 事件。

假设#aceEditor是应该发送onChange的元素，您可以在末尾标记它：

it("Enter Template Data", () => {
  cy.get('#aceEditor')
  .then((ele) => {
    const editor = ace.edit(ele[0]);
    editor.setValue("Some Text");
  })
 .trigger('change') // `cy.then()` yields the previous subject if nothing is returned,
                    // so we can just chain this on to the end
});