如何使用Cypress测试与vue axios?

Question

我有一些反设计代码

<a-form...>
<button @click="submit"
</a-form>
<script>
...
methods: {
submit() {
return this.axios({
method: "POST",
data: this.form
}).then(...)
}
}

我想创建e2e测试，该类型的形式和提交这个点击按钮。

...
cy.get("[data-testid=submit-form").click();

但是我怎么能等待当提交axios调用then-callback?Cy.wait()是一个糟糕的解决方案。

使用cyp .request它不是100%的用户用例，它的javascript触发器

Answer 1

通常的做法是:

1. 用cy.intercept()
定义路由
2. 点击
按钮
3. 等待cy.wait()对来自1的路由的响应

用一个例子来说明:

cy // 1.
.intercept('POST', '/change-ad')
.as('changeAd');
cy // 2.
.get('#save-button')
.click();
cy // 3.
.wait('@changeAd')
.its('response.statusCode')
.should('eq', 201);

显然你可以在响应到达后在UI上检查其他东西，那是在3之后。

对于某些特定的情况，如果您想要检查UI对某些后端数据的反应而不首先实际设置后端数据，您可以"响应(和状态码和什么不是)在cy.intercept()。这叫做存根。