浏览器端引入 Chai - script 标签、AMD、UMD 三种方式

支持的浏览器版本

Chai 官方声明支持：

Internet Explorer 9+
Chrome 7+
Firefox 4+
Safari 5+
Opera 10+

注意：`should 风格在 IE9 下不兼容，详见常见陷阱中关于 IE9 兼容性的说明。

方式一：script 标签直接引入

最简单的方式，直接在 HTML 中引入构建好的 chai.js：

<script src="chai.js" type="text/javascript"></script>
<script>
  // chai 作为全局对象
  var expect = chai.expect;
  expect(1 + 1).to.equal(2);
</script>

获取 chai.js 的途径：

直接下载最新版构建：Chai 官方提供 chai.js 下载。
从 GitHub Releases 下载对应版本的构建产物。
用 CDN 热链接（生产环境建议自己托管）。

方式二：AMD / RequireJS

如果你用 RequireJS 或其他 AMD 加载器：

define(['chai'], function (chai) {
  var expect = chai.expect;
  expect('hello').to.be.a('string');
});

Chai 的 UMD 构建会自动检测 define 函数，存在时注册为 AMD 模块。

方式三：Browserify / Webpack / Vite

现代前端打包工具都能正确处理 Chai 的 CommonJS / ESM 入口：

// Webpack / Vite 中
import { expect } from 'chai';
expect([1, 2, 3]).to.have.lengthOf(3);

方式四：测试框架集成

Karma

Karma 可以直接加载 node_modules 里的 chai：

// karma.conf.js
module.exports = function (config) {
  config.set({
    frameworks: ['mocha', 'chai'],
    files: [
      'node_modules/chai/chai.js',
      'node_modules/mocha/mocha.js',
      'test/**/*.test.js'
    ]
  });
};

Jest

Jest 内置了自己的 expect，但如果你更喜欢 Chai 风格，也可以在 Jest 配置中引入：

// jest.config.js
module.exports = {
  setupFilesAfterEach: ['<rootDir>/setup-chai.js']
};

// setup-chai.js
require('chai/register-should');

验证浏览器端安装

在 HTML 文件中写：

<!DOCTYPE html>
<html>
<head>
  <title>Chai 浏览器测试</title>
</head>
<body>
  <div id="mocha"></div>
  <script src="chai.js"></script>
  <script src="mocha.js"></script>
  <script>mocha.setup('bdd');</script>
  <script>
    var expect = chai.expect;

    describe('简单断言', function () {
      it('1 + 1 应该等于 2', function () {
        expect(1 + 1).to.equal(2);
      });
    });

    mocha.run();
  </script>
  <link rel="stylesheet" href="mocha.css">
</body>
</html>

用浏览器打开这个文件，Mocha 的测试报告界面会显示测试结果。

本地点文件 vs 构建产物

如果你只需要在几个测试 HTML 里用，直接放一份 chai.js 就行。
如果你的前端项目已经用了 Webpack / Vite / Rollup，直接 npm install chai 然后 import，打包工具会自动处理。

下一环节

浏览器端的更多细节和注意事项，继续看第一个断言写出第一条断言。