typescript Cypress组件测试拦截getServerSideProps请求

vmdwslir 于 2023-03-31 发布在 TypeScript

关注(0)|答案(1)|浏览(159)

无法弄清楚如何在使用Cypress组件测试时拦截getServerSideProps。
做了大量的研究和最好的铅链接：
https://github.com/cypress-io/cypress/discussions/9328
https://www.youtube.com/watch?v=33Hq41O0bvU
https://glebbahmutov.com/blog/mock-network-from-server/
https://www.youtube.com/watch?v=xdVRVhUUgCI&feature=youtu.be
有这个repo的例子：https://github.com/norfeldt/proper/tree/ssr-stubing
我想做的是
cypress/插件/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;
};

components/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);
    });
  });
});

但它连测试都做不了

typescript

来源：https://stackoverflow.com/questions/70787370/cypress-component-testing-intercept-getserversideprops-requests

1条答案

按热度按时间

vc9ivgsu1#

你有一个组件测试，它使用mount()来编译和托管组件。这实际上是一个“正常”的React测试，因为来自'@cypress/react'的mount()是react-testing-library的 Package 器。
因此，你不是在测试Next，而是在测试React。
请注意，getServerSideProps不会被你的组件显式调用，所以你在测试中所做的任何事情或插件都不会测试它。
我使用上面链接的Gleb的示例让您的测试工作，替换您的应用程序并创建一个涉及NextJS的集成测试（因此调用getServerSideProps）。
这些是我必须改变的关键

将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' }
    ]
  })

其中query(true)只接受任何查询参数。在.reply()中使用回调允许控制台日志检查它是否捕获了请求。
这是获取ssrProp的主页。

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包括服务器，要测试它，你需要e2 e测试-线索就在名字中。
组件测试是一个扩展的单元测试-它执行自己的挂载并忽略服务器。
要在组件测试中测试SSR，你必须以某种方式扩展mount()，这会给你带来额外的代码和潜在的bug。当e2 e测试相当直接并且完成这项工作时，这是毫无意义的。

赞(0）回复(0）举报 2023-03-31

我来回答

typescript Cypress组件测试拦截getServerSideProps请求

1条答案

相关问题

热门标签

最新问答