如何使用赛普拉斯存根节点服务器功能答案

【问题标题】：How to stub node server function using Cypress如何使用赛普拉斯存根节点服务器功能
【发布时间】：2020-04-25 02:23:01
【问题描述】：

我正在使用 Sapper，它在加载页面之前有一个 preload 函数。此预加载功能位于节点服务器上，允许页面水合。赛普拉斯似乎没有在这个预加载函数中存根 API 请求。

关于如何存根这些请求的想法？

赛普拉斯存根：

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

我的预加载功能：

<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>

【问题讨论】：

标签： cypress sapper

【解决方案1】：

由于 Sapper 是 SSR，因此在第一次请求页面时会在节点服务器上调用 preload 函数。当导航到不同的页面时，这个预加载函数会在浏览器中被调用，允许你存根那些 API 请求。

我的解决方案是创建一个严格用于测试的访问路由，以使应用程序水合，并重定向到请求的页面，从而允许调用页面的预加载函数。

testing/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')

【讨论】：