如何通过 Cypress 设置 React Material UI Slider 的值？

Question

我使用这里的滑块： https: //material-ui.com/components/slider/

尝试将其值设置为：

cy.get("[data-cy=slider-population]")
    .as("range")
    .invoke("val", val)
    .trigger("change");

然而它没有动。有人设法让这个工作吗？

Answer 1

为了让未来的观众更简单，@kevin 的答案将您带到所有正确的位置来提取工作测试，但是这里是没有演示代码的所有内容：

<Slider data-cy="slider-population" />

首先，您需要添加此命令：

Cypress.Commands.add("reactComponent", {
    prevSubject: "element"
}, ($el) => {
    if ($el.length !== 1) {
        throw new Error(`cy.component() requires element of length 1 but got ${$el.length}`);
    }
    // Query for key starting with __reactInternalInstance$ for React v16.x
    const key = Object.keys($el.get(0)).find((key) => key.startsWith("__reactFiber$"));
    const domFiber = $el.prop(key);
    Cypress.log({
        name: "component",
        consoleProps() {
            return {
                component: domFiber,
            };
        },
    });
    return domFiber.return;
});

然后在您的测试中，如果您想将最小值设置为 0，将最大值设置为 15：

cy.get('[data-cy="slider-population"]')
    .reactComponent()
    .its("memoizedProps")
    .invoke("onChange", null, [0, 15]);