Cypress test with Debounce input

Question

请帮忙。

我有一个去绑定的handleChange函数作为输入。解绑定函数为:

const useDebounce = (func, timeout = 500) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
export default useDebounce

处理程序是:

const handleChange = (e) => {
onData({ name: e.target.name, value: e.target.value });
};
const debouncedHandleChange = useDebounce((e) => handleChange(e), 700);

debounce函数正在从API中获取数据。如果我使用浏览器，它工作得很好。

注意:我在相同的代码中使用了lodash的debounce函数，它是可以的，但我应该使用useDebounce函数。

柏树试验为:

describe('Testing autoload PreForm information [Desktop]', () => {
beforeEach(() => {
cy.loadingCucaCorpContact();
cy.visit('/');
cy.setViewportXL();
});
it('should display autoloaded information', () => {
cy.findAllByText('Despacho y retiro').click();
cy.findAllByText('No ha llegado mi producto').click();
cy.get('[data-cy=inputrutNotReceived]').type('11111111-1');
cy.get('[data-cy=inputorderIdNotReceived]').type('777777777');
cy.contains(
'Lo sentimos, estamos presentando algunas dificultades, vuelve a intentarlo dentro de un momento',
{ timeout: 5000 }
);
});
});

测试没有成功，因为没有调用API。我用了这样的例子:

cy.wait(6000)
...
cy.clock()
cy.tick(500)
...
cy.get('[data-cy=inputorderIdNotReceived]').type('777777777').trigger('change);

…仍然不工作

任何想法?

问好。

Answer 1

Debounce总是有点令人难以置信，但我注意到你在应用程序中发送了700ms，但在测试中你只勾选了500ms。

首先，尝试cy.tick(710)。

如果这不起作用，删除cy.clock()和cy.tick()，因为它们实际上阻止了脱壳射击(setTimout()被这些命令有效地冻结)。

React hooks和cy.wait(0)

useDebounce看起来像是一个自定义钩子，所以接下来要尝试的是添加cy.wait(0)来释放JS线程，并允许React钩子进行处理。

cy.findAllByText('Despacho y retiro').click();
cy.findAllByText('No ha llegado mi producto').click();
cy.get('[data-cy=inputrutNotReceived]').type('11111111-1');
cy.wait(0)
cy.get('[data-cy=inputorderIdNotReceived]').type('777777777');
cy.wait(0)
cy.contains('Lo sentimos', { timeout: 5000 })

.type()延迟选项

第三个选项，Cypress.type()有一个延迟选项，可能是有用的，但它是在按键之间，但debounce是延迟发送整个字符串到API。

在任何情况下，这都值得一试，因为复杂的处理程序可能无法以默认的10ms速率拾取Cypress输入的键。

cy.get('[data-cy=inputrutNotReceived]').type('11111111-1', {delay: 100});