Mocha在移动端浏览器里跑不起来怎么办？

ლ志利提问于 2026-03-08 22:34:21 阅读 141

移动

我在用 Mocha 写前端单元测试，桌面浏览器没问题，但放到手机 Safari 或 Chrome 上就报错，控制台显示 ReferenceError: describe is not defined，是不是移动端不支持 Mocha 啊？

我试过直接引入 mocha.js 和 chai.js，HTML 结构也照官网写的：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mocha Tests</title>
  <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" rel="external nofollow"  />
</head>
<body>
  <div id="mocha"></div>
  <script src="https://unpkg.com/chai/chai.js"></script>
  <script src="https://unpkg.com/mocha/mocha.js"></script>
  <script>
    mocha.setup('bdd');
    const { expect } = chai;
  </script>
  <script src="test.js"></script>
  <script>
    mocha.run();
  </script>
</body>
</html>

难道移动端需要额外配置什么？还是得用别的测试框架？

我来解答赞 10 收藏

反馈

2 条解答

令狐爱香 Lv1

这不是移动端的问题，是脚本加载顺序搞错了。

mocha.setup() 和 mocha.run() 必须放在 test.js 加载完成之后执行，你把它们分开写在两个 script 标签里，浏览器可不会按你想的顺序执行。

改一下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>Mocha Tests</title>

  <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />

</head>

<body>

  <div id="mocha"></div>

  <script src="https://unpkg.com/chai/chai.js"></script>

  <script src="https://unpkg.com/mocha/mocha.js"></script>

  <script src="test.js"></script>

  <script>

    mocha.setup('bdd');

    const { expect } = chai;

    mocha.run();

  </script>

</body>

</html>

核心改动就是把这三个东西放在同一个 script 块里：mocha.setup、expect 赋值、mocha.run。

另外如果 test.js 里有异步代码或者 DOM 操作，最好包一层：

<script>

  mocha.setup('bdd');

  const { expect } = chai;

  

  if (typeof test === 'function') {

    test();

  }

  

  mocha.run();

</script>

移动端浏览器完全支持 Mocha，别被误导了。

2026-03-11 12:04

技术司卿 Lv1

这问题我遇到过，不是移动端不支持Mocha，而是你加载顺序有问题。移动端浏览器对脚本加载更敏感，需要确保Mocha初始化完成再执行测试。

试试这个改法，效率更高而且稳定：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>Mocha Tests</title>

  <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />

</head>

<body>

  <div id="mocha"></div>

  

  <script src="https://unpkg.com/mocha/mocha.js"></script>

  <script src="https://unpkg.com/chai/chai.js"></script>

  <script>

    // 必须把测试代码包裹在mocha ready回调里

    mocha.setup('bdd').then(() => {

      const { expect } = chai;

      

      // 直接内联测试代码或者动态加载

      describe('移动端测试', function() {

        it('应该能跑通', function() {

          expect(true).to.be.true;

        });

      });

      

      mocha.run();

    });

  </script>

</body>

</html>

关键点：
1. 先加载mocha再加载chai，顺序不能错
2. 用mocha.setup().then()确保初始化完成
3. 测试代码要么内联要么动态加载，避免脚本阻塞

移动端浏览器有时会并行加载脚本导致依赖关系错乱，这方案能解决90%的兼容性问题。要是还不行，可以加上async或defer属性控制加载时机。

别折腾换框架了，Mocha在移动端完全能用，就是得注意这些细节。我当初也在这坑里卡了半天，后来发现就是加载时序的问题。

2026-03-08 23:01