Question

我正在使用Cypress.io在我的React App上进行测试。我在其中一个组件中使用Ace Editor。我正在使用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
});

AceEditor setValue（）不会触发我的React App的onChange函数

1 个答案: