如何使用然后使用javascript，react和cypress重写代码？

Question

我有如下代码，它使用了很多嵌套的 then 子句。此代码用于测试我用 javascript 编写的代码并使用 cypress 做出反应。

{
export const waitForItems = (retries, nrItems) => {
    cy.apiGetItems().then(items => {
        if(items.length!== nrItems && retries > 0) {
            cy.wait(1000);
            return waitForItems(retries -1, nrItems);
        }
        expect(items.length).to.be.equal(nrItems);
    });
};

const item = {
    name: 'name1',
};
const itemFamily = 'ItemFamily1';
const subfamily = {
    name: 'subfamily1',
}

describe('some test', () => {
    before(() => {
        cy.clickButtonByLabel('Click');
        switchUser(USERNAME);
        waitForItems(NUMBEROFRETRIES, NUMBEROFITEMS);

        cy.apiGetItems({ name: item.name })
            .then(createdItem => {
                item.id = createdItem[0].id;
        })
        .then(() => {
            cy.apiGetItemFamily({
                name: itemFamilyName,
            }).then(family => {
                cy.apiGetSubFamily({
                    name: subfamily1.name,
                    item__family__id__in: family[0].id,
                }).then(subfamily => {
                    subfamily1.id = subfamily[0].id; //error here says cannot read 
                    // id of undefined
                    cy.apiPostSomething({
                        ...something,
                        items: [item.id],
                        subfamily: [subfamily1.id],
                    }).then(createdSomething => {
                        something.id = createdSomething.id;
                        cy.apiGetItemVariable({
                            key: ItemVariableName,
                            subfamily__id__in: subfamily1.id,
                        }).then(variable => {
                            cy.apiPostVariableValue({
                                variable: variable[0].id,
                                value: controlValue,
                            }).then(() => {
                                cy.apiGetsubFamily({
                                    name: subfamily1.name,
                            }).then(newControl => {
                                const versions =
                                    newControl[0].versions;
                                const latestVersionControl = versions.find(
                                    v => v.version === '3.9.0'
                                );
                                const id = latestVersionControl.id;
                                cy.apiPatchSomething({
                                    id: Something.id,
                                    controls: [id], 
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});

上面的代码工作正常。但有时我在 then(subfamily) 子句中收到错误“无法读取未定义的 id”。

我不确定为什么 subfamily[0] 在尝试这样分配时仍然不可用

 .then(subfamily => {
     subfamily1.id = subfamily[0].id;
 }

谁能帮我解决这个问题。谢谢。

Answer 1

首先，你应该尝试使用 async/await 语法，因为你使用了 Promise。它将帮助您编写更易于阅读的代码：

describe('some test', () => {
    before(async () => { //add async there
        cy.clickButtonByLabel('Click');
        switchUser(USERNAME);
        waitForItems(NUMBEROFRETRIES, NUMBEROFITEMS);

        const createdItem = await cy.apiGetItems({ name : item.name });
        item.id = createdItem[0].id;
        const family = await cy.apiGetItemFamily({ name: itemFamilyName });
        //and so one
    });
});

这样，您将以一种看起来同步的方式编写代码。

关于亚科的问题，

可能是cy.apiGetSubFamily的返回值没有返回数组，或者返回的是一个空数组。

编辑赛普拉斯：

Cypress 不能很好地与 Promise 配合使用，这与 async/await 语法问题无关。由于 Cypress 返回 thenable，async/await 应该可用。

但是由于 Cypress paradigm 以它的方式处理异步，当我们等待时，await/async 语法会导致不确定的结果。更多信息可以在这里找到：https://github.com/cypress-io/cypress/issues/1417