無法讓 Cypress 和 Pact 一起工作

Question

我已經有很少通過賽普拉斯測試的工作項目。 現在我正在嘗試使用 Cypress + Pact 添加合同測試

在開發人員控制台中，我可以看到該應用程序正在調用/api/v1/document-service ，但我得到：

契約驗證失敗 - 預期的交互與實際不匹配。

部分日志：

W, [2021-07-20T12:49:37.157389 #34805]  WARN -- : Verifying - actual interactions do not match expected interactions.

Missing requests:
    POST /api/v1/document-service

W, [2021-07-20T12:49:37.157489 #34805]  WARN -- : Missing requests:
    POST /api/v1/document-service

我在用着：

  cypress: 7.5.0
  @pact-foundation/pact: 9.16.0

我做過的步驟：

1. 添加了 cypress 插件（ https://github.com/pactflow/example-consumer-cypress/blob/master/cypress/plugins/cypress-pact.js ）

2. 添加命令（ https://github.com/pactflow/example-consumer-cypress/blob/master/cypress/support/commands.js ）

3. 將配置添加到 cypress.json ( https://github.com/pactflow/example-consumer-cypress/blob/master/cypress.json ) - 如果我不想與真實服務器交互，不確定要放入 baseUrl 的內容.

4. 添加測試：

    let server; describe('Simple', () => { before(() => { cy.mockServer({ consumer: 'example-cypress-consumer', provider: 'pactflow-example-provider', }).then(opts => { cy.log(opts) server = opts }) }); beforeEach(() => { cy.fakeLogin() cy.addMockRoute({ server, as: 'products', state: 'products exist', uponReceiving: 'a request to all products', withRequest: { method: 'POST', path: '/api/v1/document-service', }, willRespondWith: { status: 200, body: { data: { collections: [ { id: '954', name: 'paystubs', }, { id: '1607', name: 'mystubs', }, ], }, }, }, }); }); it('is ok?', () => { cy.visit('/new/experiments/FirstProject/collections'); }); })

嘗試使用已棄用的cy.server() / cy.route()和新的cy.intercept() ，但仍然驗證失敗。

Answer 1

在 Pactflow，我們花了大約 6 個月的時間一起使用 Cypress 和 Pact，使用 Pact 模擬服務從我們的 Cypress 測試中生成協議，如https://pactflow.io/blog/cypress-pact-front-end-testing 中的建議-有信心的/

由於以下原因，我們本周決定改變我們的方法。

1. 我們的 Cypress 測試比我們的單元測試慢得多（15 分鍾以上），因此當我們從 Cypress 測試和單元測試生成協議時，生成協議並驗證它需要更長的時間。
2. 我們的 Cypress 測試可能會因為與 Pact 無關的原因而失敗（例如布局更改、構建節點上的內存消耗問題、UI 庫升級等），這會阻止生成 Pact。
3. Cypress 攔截（）和模擬服務不能很好地配合使用。 任何對 Cypress 沒有顯式攔截（）的請求都以模擬服務結束，每次頁面使用新端點時，請求都會命中模擬服務，然后整個測試失敗，即使該端點該特定測試不需要。
4. 當賽普拉斯測試失敗時，賽普拉斯庫提供了非常好的調試。 當它由於與 Pact 相關的原因而失敗時，目前很難確定原因，因為該信息不會顯示在瀏覽器中（這可能會得到改進，但是，它不會減輕已經列出的問題）。

我們的新方法是從我們的單元測試（而不是我們的 Cypress 測試）中生成我們的 Pact，並使用一個剝離 Pact 匹配器的函數在單元和 Cypress 測試之間共享夾具。 例如。

const SOME_INTERACTION = {
  state: 'some state',
  uponReceiving: "some request",
  withRequest: {
    method: "GET",
    path: "/something"
  },
  willRespondWith: {
    status: 200,
    body: {
      something: like("hello")
    }
  }
}

單元測試

describe('Something', () => {
  let someProviderMockService
  beforeAll(() => {
    someProviderMockService = new Pact({
      consumer: 'some-consumer',
      provider: 'some-provider'
    })
    return someProviderMockService.setup()
  })
  afterAll(() => someProviderMockService.finalize())
  afterEach(() => someProviderMockService.verify())

  describe('loadSomething', () => {
    beforeEach(() => {
      return someProviderMockService.addInteraction(SOME_INTERACTION)
    })

    it('returns something', async () => {
      const something = await loadSomething()
      //expectations here
    })
  })
})

將 Pact 交互格式轉換為 Cypress 路由格式並去除 Pact 匹配器的函數。

const Matchers = require('@pact-foundation/pact-web').Matchers

// TODO map the request body and query parameters too
const toCypressInteraction = (interaction) => {
  return {
    method: interaction.withRequest.method,
    url: Matchers.extractPayload(interaction.withRequest.path),
    status: interaction.willRespondWith.status,
    headers: Matchers.extractPayload(interaction.willRespondWith.headers),
    response: Matchers.extractPayload(interaction.willRespondWith.body)
  }
}

在賽普拉斯測試中

cy.route(toCypressInteraction(SOME_INTERACTION))

這種方法有以下好處：

1. 契約很快產生。
2. 契約是可靠生成的。
3. Cypress 測試更可靠且更易於調試。
4. Cypress 測試中使用的請求經驗證是正確的。
5. “交互膨脹”的可能性較小，其中添加交互只是為了測試 UI 功能，而不是因為它們提供了有價值的覆蓋。

我希望這些信息對您有所幫助。 我們現在推薦這種方法，而不是在 Cypress 測試中直接使用模擬服務。