Cypress 组件测试拦截 getServerSideProps 请求

使用 cypress 组件测试时无法弄清楚如何拦截 getServerSideProps。

做了很多研究和最好的线索链接：

https://github.com/cypress-io/cypress/discussions/9328 https://github.com/cypress-io/cypress/discussions/9328

https://www.youtube.com/watch?v=33Hq41O0bvU https://www.youtube.com/watch?v=33Hq41O0bvU

https://glebbahmutov.com/blog/mock-network-from-server/ https://glebbahmutov.com/blog/mock-network-from-server/

有这个示例仓库：https://github.com/norfeldt/proper/tree/ssr-stubing https://github.com/norfeldt/proper/tree/ssr-stubing

我尝试做的是：

赛普拉斯/插件/index.ts

const http = require('http');
const next = require('next');
const nock = require('nock');

// start the Next.js server when Cypress starts
module.exports = async (on, config) => {
  const app = next({ dev: true });
  const handleNextRequests = app.getRequestHandler();
  await app.prepare();

  on('dev-server:start', async () => {
    const customServer = new http.Server(async (req, res) => {
      return handleNextRequests(req, res);
    });
    await new Promise<void>((resolve, reject) => {
      customServer.listen(3000, err => {
        if (err) {
          return reject(err);
        }
        console.log('> Ready on http://localhost:3000');
        resolve();
      });
    });

    return customServer;
  });

  on('task', {
    clearNock() {
      nock.restore();
      nock.clearAll();

      return null;
    },

    async nock({ hostname, method, path, statusCode, body }) {
      nock.activate();

      console.log({ hostname, method, path, statusCode, body });

      method = method.toLowerCase();
      nock(hostname)[method][path].reply(statusCode, body);

      return null;
    },
  });

  return config;
};

组件/AddProperty/index.spec.ct.tsx

import { mount } from '@cypress/react';
import Component from './index';

beforeEach(() => {
  cy.task('clearNock');
});

it.only('queries the api', () => {
  cy.fixture('properties').then((properties: Property[]) => {
    cy.task('nock', {
      path: '/api/address?q=*',
      method: 'GET',
      statusCode: 200,
      body: {
        json: function () {
          return [{ id: '42', adressebetegnelse: 'Beverly Hills' } as Partial<Property>];
        },
      },
    });
    cy.intercept('GET', '/api/address?q=*', properties).as('getProperties');

    mount(<Component />);

    cy.contains('Beverly Hills');

    cy.get('input').type('Some address{enter}');

    cy.wait('@getProperties').its('response.statusCode').should('eq', 200);

    properties.forEach(property => {
      cy.contains(property.adressebetegnelse);
    });
  });
});

但它甚至不会运行测试

您有一个使用的组件测试mount()编译和托管组件。这实际上是一个“正常”的 React 测试，因为mount()来自“@cypress/react”是react-testing-library的包装器。

因此，您不是在测试 Next，而是在测试 React。

注意getServerSideProps不是由您的组件显式调用的，因此您在测试中或插件中所做的任何操作都不会对其进行测试。

我使用上面链接的 Gleb 示例进行了测试，替换了您的应用程序并创建了一个涉及 NextJS 的集成测试（因此调用getServerSideProps).

这些是我必须改变的关键事情

• move getServerSideProps到一个页面（我使用主页）。 NextJS 不会在组件上调用它

• 改变拼写（你有getServersideProps)

• 添加一个返回值getServerSideProps

• 去掉cy.intercept，因为nock任务正在做拦截

这是测试

it.only('queries the api', () => {

  cy.task('nock', {
    hostname: 'http://localhost:3000',
    method: 'GET',      
    path: '/api/address',
    statusCode: 200,
    body: {
      json: function () {
        return [{ id: '42', adressebetegnelse: 'Beverly Hills' }];
      },
    },
  });

  cy.visit('http://localhost:3000')
  cy.contains('Beverly Hills')       // this is what comes from ssrProps

在插件/索引中，我将 nock 拦截器更改为

nock(hostname)[method](path)
  .query(true)
  .reply((uri, requestBody) => {
    console.log('nock uri', uri)
    return [
      200,
      { id: '42', adressebetegnelse: 'Beverly Hills' }
    ]
  })

where query(true)仅接受任何查询参数。使用回调.reply()允许控制台日志检查它是否正在捕获请求。

这是获取 ssrProps 的主页。

import PropertyList from '../components/PropertyList/index.js'
import Link from 'next/link'

export default function Home(props) {

  return (
    <div>
      <h1>Portfolio</h1>
      <PropertyList />
      <Link href="/add">Tilføj ejendom</Link>

      <!-- outputting the ssrProps value here -->
      <div>{props.ssrProps.adressebetegnelse}</div>

    </div>
  )
}

export async function getServerSideProps(context) {

  const res = await fetch(`http://localhost:3000/api/address?q=strandvejen`)   
  const data = await res.json()

  return {    
    props: {
      ssrProps: data
    },
  }
}

从评论来看，

将集成测试SSR模拟请求转换为组件测试不容易吗？

我仍然认为这是不可能的，并且违背了每种测试类型的目的。 SSR 包括服务器，要测试它，您需要 e2e 测试 - 线索就在名称中。

组件测试是扩展的单元测试 - 它执行自己的安装并忽略服务器。

要在组件测试中测试 SSR，您必须扩展mount()在某种程度上，给你额外的代码和潜在的错误。当 e2e 测试相当简单并且能够完成工作时，IMO 毫无意义。