PollyJS快速入门指南：前端HTTP请求录制与回放工具详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00240/article/details/148416005

PollyJS快速入门指南：前端HTTP请求录制与回放工具详解

pollyjs Record, Replay, and Stub HTTP Interactions. 项目地址: https://gitcode.com/gh_mirrors/po/pollyjs

什么是PollyJS？

PollyJS是一个强大的JavaScript库，专门用于记录和回放HTTP交互。它通过拦截应用程序发出的请求，可以将其保存为"录音"并在后续测试中回放，从而实现稳定可靠的测试环境。这个工具特别适合前端开发者在单元测试、集成测试以及开发过程中构建各种网络场景。

环境准备

在开始使用PollyJS之前，需要确保你的开发环境满足以下条件：

Node.js运行环境（建议使用LTS版本）
npm或yarn包管理工具
现代浏览器或Node.js测试环境

安装核心库

PollyJS采用模块化设计，核心库只提供基础功能，其他功能通过适配器和持久化器扩展。首先安装核心库：

# 使用npm安装
npm install @pollyjs/core -D

# 或者使用yarn安装
yarn add @pollyjs/core -D

工作原理深入解析

PollyJS通过以下机制实现请求拦截和响应管理：

适配器层：挂钩到原生实现（如fetch、XHR）来拦截请求
模式控制：根据配置决定是记录、回放还是透传请求
服务器构建：提供客户端服务器来定义请求处理规则
持久化：将记录的请求/响应数据保存到不同存储介质

扩展功能安装

根据你的具体需求，需要安装相应的适配器和持久化器：

# 安装适配器（以fetch和XHR为例）
npm install @pollyjs/adapter-fetch @pollyjs/adapter-xhr -D

# 安装持久化器（以localStorage为例）
npm install @pollyjs/persister-local-storage -D

安装完成后，需要在代码中注册这些组件：

import { Polly } from '@pollyjs/core';
import FetchAdapter from '@pollyjs/adapter-fetch';
import XHRAdapter from '@pollyjs/adapter-xhr';
import LocalStoragePersister from '@pollyjs/persister-local-storage';

// 注册适配器和持久化器
Polly.register(FetchAdapter);
Polly.register(XHRAdapter);
Polly.register(LocalStoragePersister);

浏览器环境特别说明

在浏览器环境中使用时，需要注意持久化方案的选择：

临时存储：使用LocalStorage持久化器，适合短期存储
长期存储：需要配合REST持久化器使用，它会将数据保存到文件系统

基础使用示例

下面是一个完整的测试用例示例，展示了PollyJS的基本用法：

describe('获取博客文章测试', function() {
  it('应成功获取指定文章', async function() {
    // 创建Polly实例
    const polly = new Polly('获取文章测试', {
      adapters: ['fetch'],
      persister: 'local-storage',
      logLevel: 'info'
    });

    // 发起请求并验证响应
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const post = await response.json();

    expect(response.status).to.equal(200);
    expect(post.id).to.equal(1);

    // 测试完成后停止Polly
    await polly.stop();
  });
});

第一次运行此测试时，PollyJS会记录服务器响应。后续运行时，则会使用记录的响应数据，不再实际访问服务器。

高级功能：客户端服务器

PollyJS提供了强大的客户端服务器功能，可以精细控制请求处理：

it('应处理不存在的文章请求', async function() {
  const polly = new Polly('处理404测试', {
    adapters: ['fetch'],
    persister: 'local-storage'
  });
  
  const { server } = polly;

  // 设置自定义拦截规则
  server
    .get('https://jsonplaceholder.typicode.com/posts/404')
    .intercept((req, res) => {
      res.status(404).json({ error: '文章不存在' });
    });

  // 验证自定义响应
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/404');
  const data = await response.json();

  expect(response.status).to.equal(404);
  expect(data.error).to.equal('文章不存在');

  await polly.stop();
});