针对不同状态的赛普拉斯 MOCK api 响应

Question

我正在使用 Cypress 测试我的登录组件（刚开始使用它），我想处理 API 返回状态 200、400 或 500 的三种不同情况。我想模拟这些响应以查看前端如何响应.

在向我的 API 端点 http://localhost:9999/api/login 发送请求时，我想模拟三种不同情况（200、400 和 500）的响应

我已经根据文档编写了一些代码，但我仍然不是我想要的。

describe('Login Approach', () => {
  it('login', () => {
    cy.visit('/login')
 // these values email and pw shouldn't matter if mocking is done right
    cy.get('#email')
      .type('test')
      .should('have.value', 'test')

    cy.get('#password')
      .type('123456')
      .should('have.value', '123456')
    cy.server()
    cy.route({
      method: 'POST',
      url: 'http://localhost:9999/api/login', // this is the api that I send the request to 
    })
    cy.location('pathname', { timeout: 10000 }).should('eq', '/login');
    cy.title().should('include', 'Condeo')
    cy.get('#notification').should('exist')
  })
})

我没有在测试的详细信息中获得状态：

Method  Url                               Stubbed     Alias  #
POST    http://localhost:9999/api/login   Yes                -

Answer 1

你应该使用cypress的wait方法。

您可以找到赛普拉斯文档here。

对于您的用例，请确保在访问链接之前启动服务器并定义路由。访问该链接后，使用 cy.wait() 方法，该方法将等待该 API 调用完成。

例如。

describe('Login Approach', () => {
  it('login', () => {
    cy.visit('/login')
 // these values email and pw shouldn't matter if mocking is done right
    cy.get('#email')
      .type('test')
      .should('have.value', 'test')

    cy.get('#password')
      .type('123456')
      .should('have.value', '123456')
    cy.server()

    cy.route({
      method: 'POST',
      url: 'http://localhost:9999/api/login', // this is the api that I send the request to 
    }).as('login') 

    cy.location('pathname', { timeout: 10000 }).should('eq', '/login');
    cy.title().should('include', 'Condeo')
    cy.get('#notification').should('exist')
    
    // Code which will try to visit the login API. 
    cy.wait('@login').then((xhr)=> {
       if(xhr.status === 200) {
           // Code to test when status is 200
       } else if(xhr.status === 400) {
           // Code to test when status is 400
       } else {
           // Code to test when status is none of the above.
       }
    })
  })
})