在 Mocha 测试中遇到的 “Unexpected token import” 的解决方法

阅读时长 4 分钟读完

在进行前端项目开发的过程中,我们常常需要使用 Mocha 进行单元测试。在测试过程中,我们有时候会遇到报错信息“Unexpected token import”,这是因为 Mocha 在默认情况下无法识别 ES6 的 import 语法所导致的。

那么该如何解决这个问题呢?以下是具体的解决方法:

使用 Babel

使用 Babel 是解决 “Unexpected token import” 错误的最常用方法。Babel 是一个非常流行的 JavaScript 编译工具,它可以将现代 JavaScript 语法转换为可在大多数浏览器上运行的旧的 ES5 语法。通过在测试文件中安装并配置 Babel,就可以解决上面的问题了。

安装 Babel

我们可以使用 npm 进行 Babel 安装,只需要在项目根目录下进行以下命令:

其中,@babel/cli 是 Babel 的命令行接口,@babel/core 是核心模块,@babel/preset-env 是用来指定需要转换哪些新语法的预设模块,mocha 是测试框架。

配置 Babel

在项目根目录下创建一个 .babelrc 文件,用来配置 Babel。我们需要添加以下代码:

这里的 @babel/preset-env 模块将自动根据项目中所使用的 ECMAScript 特性进行转换。

测试文件的配置

在测试文件中,我们需要为 Mocha 配置启动脚本。在项目指定目录下创建一个 test/ 文件夹,并在该文件夹下创建一个文件 mocha.opts ,在其中添加以下配置:

此时,Mocha 将会在测试前,先读入所有测试脚本,然后在执行这些脚本前用 Babel 进行转换。

使用 webpack

另一个解决 “Unexpected token import” 错误的方法是使用 webpack。Webpack 是一个将 JavaScript 编译成浏览器可以使用的东西的工具,它可以解析 ES6 语法,包括 import 和 export。

安装 webpack

使用 npm 进行 webpack 安装,只需要在项目根目录下进行以下命令:

其中,webpack 和 webpack-cli 是 Webpack 的核心模块,webpack-dev-server 是用于本地调试的服务器,mocha 和 chai 是测试框架。

配置 webpack

在项目指定目录下创建一个 webpack.config.js 文件,用来配置 webpack。我们需要添加以下代码:

-- -------------------- ---- -------
-------------- - -
  ----- --------------
  ------ -----------------------
  ------- -
    ------ -
      -
        ----- --------
        -------- ---------------
        ------- --------------
      -
    -
  -
-

这里我们使用 babel-loader 来翻译我们的 JavaScript 文件。

测试文件的配置

在测试文件中,我们需要编写 index.js 文件,并运行 webpack 打包:

-- -------------------- ---- -------
------ ------ ---- --------
------ ---- ---- -----------

---------------- -- -- -
  ---------- ------ ---- -- ----- ------ --- -- -- -
    --------------------- -----
  --

  ---------- ------ ----- -- ----- ---- --- ----- --- -- -- -
    --------------------- ------
  --
--

然后在命令行中运行 webpack 命令:“npx webpack”,此时 webpack 将会在 test/unit 目录下生成一个 bundle.js 文件。接下来,在命令行输入“mocha test/unit/bundle.js”,即可运行我们的测试用例。

结论

总之,在使用 Mocha 进行测试时,我们需要使用 ES6 的语法。但是,Mocha 默认是不能够识别 ES6 的模块化语法的。因此,我们需要使用 Babel 或者 webpack 来解决这个问题。以上两种方法,均可以解决 “Unexpected token import” 的问题。其中,Babel 的配置比较简单,而 webpack 能够更加强大,更加灵活。具体的使用,需要根据实际情况进行选择。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67088eb3d91dce0dc8725b61

纠错
反馈