cy.intercept() 不在赛普拉斯中存根 API

Question

当我使用 cy.intercept() 时，API 不会存根。

任何帮助将不胜感激，谢谢

cy.intercept('GET',
          `${API}farm/list`,
          {
         body:{           
               statusCode: 200,
               message: 'Request successful',
               result: seededFarmList
               }
          });

我正在像这样导入夹具文件：

从'../../../../../fixtures/farm'导入{seedFarmList}；

我的 API 响应如下所示：

{
 "statusCode": 200, 
"message": "Request successful", 
"result": 
[ 
  { "id": 1 "farmName": "ABCD", },
  { "id": 2 "farmName": "EFGH", }
]
}

Answer 1

确保在应用程序进行 api 调用之前注册网络拦截。请注意cy.intercept是之前设置的cy.visit。

it('is registered correctly', () => {
  cy.intercept('/todos').as('todos')
  cy.visit('/')
  cy.wait('@todos')
})

在下面的示例中cy.intercept设置后cy.visit，这可能会失败。

 it('is registered too late, this might fail', () => {
    cy.visit('/')
    cy.intercept('/todos').as('todos')
    cy.wait('@todos')
  })

Answer 2

我不完全确定为什么它没有存根（假设您的意思是服务器响应正在通过？）。

无论如何，存根响应模式现在变得更加复杂，并且会让很多人陷入困境。

这是我对文档的解释，

在 中cy.route(method, url, response)，响应记录为正文

为匹配路由中的存根提供响应主体。

在 中cy.intercept(method, url, routeHandler?)，routeHandler 是一个更复杂的野兽。

RouteHandler（字符串|对象|函数|静态响应）

但object和StaticResponse都是对象 - Cypress 通过查看对象键来区分，根据 this

如果传递没有 StaticResponse 键的对象，它将作为 JSON 响应正文发送。

静态响应键是

{
  fixture?: string
  body?: string | object | object[]
  headers?: { [key: string]: string }
  statusCode?: number
  forceNetworkError?: boolean
  delayMs?: number
  throttleKbps?: number
}

由于您正在发送statusCode，因此您的对象是StaticResponse，因此消息和结果应移至正文，

cy.intercept('GET',
  `${API}farm/list`,
  {
    statusCode: 200,
    body: {
      message: 'Request successful',
      result: seededFarmList
    }
  }
);

在我看来，他们有点过度设计了——从 StaticResponse 到对象（取决于键）的回退有点不必要。

我刚刚在示例规范中找到了一个示例network_requests.spec.js（在赛普拉斯第一次运行时添加）。

beforeEach(() => {
  cy.visit('https://example.cypress.io/commands/network-requests')
})

...

let message = 'whoa, this comment does not exist'

// Stub a response to PUT comments/ ****
cy.intercept({
  method: 'PUT',
  url: '**/comments/*',
}, {
  statusCode: 404,
  body: { error: message },                         // stub returns above message
  headers: { 'access-control-allow-origin': '*' },
  delayMs: 500,
}).as('putComment')

// we have code that puts a comment when
// the button is clicked in scripts.js
cy.get('.network-put').click()

cy.wait('@putComment')

// our 404 statusCode logic in scripts.js executed
cy.get('.network-put-comment').should('contain', message)

Answer 3

我设法使用 @eric99 给出的模式进行存根工作，

cy.intercept(
  'GET',
  'https://jsonplaceholder.typicode.com/todos/1',
  {
    statusCode: 200,
    body: {
      message: 'Request successful',
      result: ['my-data']
    }
  }
)
.as('typicode')

cy.visit('https://jsonplaceholder.typicode.com/')
cy.get('#run-button').click();

cy.wait('@typicode')
.then((interception) => {
  console.log('interception', interception)
})

页面显示存根信息，

{
    "message": "Request successful",
    "result": [
        "my-data"
    ]
}