Question

我正在使用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>

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

Cypress命令.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')

如何使用赛普拉斯

1 个答案: