如何使用賽普拉斯存根節點服務器 function

Question

我正在使用 Sapper，它在加載頁面之前preload了 function。 此預加載 function 位於節點服務器上，允許頁面水合。 在此預加載 function 中，賽普拉斯似乎沒有存根 API 請求。

關於如何存根這些請求的想法？

賽普拉斯存根：

cy.server()
cy.route({
  method: 'GET',
  url: 'v1/preference',
  status: 200,
  response: {}
}).as('postPreference')

我的預載 function：

<script context='module'>
    import * as api from 'api.js'

    export async function preload(params, session) {
        const { user } = session
        if (!user) { return this.redirect(302, 'sign-in') }
        const preference = await api.get('v1/preference', session.token)
        return { preference }
    }
</script>

Answer 1

由於 Sapper 是 SSR，因此第一次請求頁面時，會在節點服務器上調用預加載 function。 當導航到不同的頁面時，這個預加載 function 然后在瀏覽器中被調用，允許你存根那些 API 請求。

我的解決方案是創建一個嚴格用於測試的訪問路由，以使應用程序水合，並重定向到請求的頁面，從而允許調用頁面的預加載 function。

測試/routes.svelte

<script context='module'>
    // See /cypress/support/commands.js #visitLocal
    export async function preload(page, session) {
        const { query } = page
        const href = query.href
        if (!href) { return this.redirect(302, '/') }
        return { href }
    }
</script>

<script>
    import { goto } from '@sapper/app'
    export let href
    goto(href)
</script>

賽普拉斯 commands.js

Cypress.Commands.add('visitLocal', (path) => {
  cy.visit(`testing/routes?href=${path}`, { failOnStatusCode: false })
  cy.hydrated() // https://stackoverflow.com/a/61374676/13124916
})

在測試中使用： cy.visitLocal('route-you-want-to-test-with-preload-being-called')