如何测试服务器端渲染的Web应用？

测试服务器端渲染的 Web 应用可以分为两个方面：前端和后端测试。

前端测试：

1. 使用 Puppeteer 模拟浏览器环境进行测试。

const puppeteer = require('puppeteer');

describe('Server side rendering', () => {
  let browser;
  let page;

  beforeEach(async () => {
    browser = await puppeteer.launch();
    page = await browser.newPage();
  });

  afterEach(async () => {
    await browser.close();
  });

  it('renders content on the server side', async () => {
    await page.goto('http://localhost:3000');

    const heading = await page.$eval('h1', el => el.textContent);
    expect(heading).toEqual('Server Side Rendering');
  });
});

这段代码演示了如何使用 Puppeteer 在模拟浏览器环境中测试服务器端渲染页面。它会打开一个浏览器页面，在其中输入 URL，并在页面上寻找标题元素，最后断言标题文本与预期的文本相匹配。

2. 通过 Jest 中的 snapshot 测试来检查页面的渲染输出是否正确。

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';

describe('Server side rendering', () => {
  it('renders a snapshot', () => {
    const tree = ReactDOMServer.renderToString(<App />);
    expect(tree).toMatchSnapshot();
  });
});

这段代码演示了如何使用 Jest 的快照测试功能，在加载文件后使用 React 的 ReactDOMServer 将 React 组件转换为字符串，并断言字符串与快照匹配。

后端测试：

1. 使用 Supertest 库测试 HTTP API。

const request = require('supertest');
const app = require('./app');

describe('Server side rendering', () => {
  it('responds with HTML', async () => {
    const response = await request(app).get('/');
    
    expect(response.status).toEqual(200);
    expect(response.type).toEqual('text/html