八、使用模块别名增强Jest配置

Javascript 社区中的模块管理器（主要是 ES 模块和 CommonJS）不支持基于项目的路径。它们只支持我们自己模块的相对路径和node_modules文件夹的路径。随着项目的发展，通常会看到以下路径：

import SomeComponent from "../../../../components/SomeComponent";


幸运的是，我们有不同的方法来处理这个问题，我们可以定义文件夹相对于项目根目录的别名，因此我们可以按如下方式编写前一行：

import SomeComponent from "@/components/SomeComponent";


这里，@是定义根项目的任意字符。但是，您可以定义自己的。让我们看看有什么解决方案可以应用模块别名。让我们从最后一章（中结束的地方开始 https://github.com/alexjoverm/vue-testing-series/tree/test-slots ）。

网页包别名（https://webpack.js.org/configuration/resolve/#resolve-别名的设置非常简单。您只需要在您的网页包配置中添加一个resolve.alias属性。如果您查看build/webpack.base.conf.js，它已经定义了：

module.exports = {
// ...
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
vue$: "vue/dist/vue.esm.js"
}
}
};


以此为入口点，我们可以添加一个指向src文件夹的简单别名，并将其用作根目录：

module.exports = {
// ...
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
vue$: "vue/dist/vue.esm.js",
"@": path.join(__dirname, "..", "src")
}
}
};


仅此一项，我们就可以访问任何内容，将根项目作为@符号。让我们转到src/App.vue并更改对这两个组件的引用：

import MessageList from "@/components/MessageList";
import Message from "@/components/Message";
// ...


如果我们运行npm start并在localhost:8080打开浏览器，这应该是现成的。

然而，如果我们试图通过运行npm t来运行测试，我们将看到 Jest 没有找到模块。我们还没有配置 Jest 来执行此操作。因此，让我们转到 Jest 配置所在的package.json，并将"@/([^\\.]*)$": "/src/$1"添加到moduleNameMapper：

{
"jest": {
"moduleNameMapper": {
"@(.*)$": "/src/$1",
"^vue$": "vue/dist/vue.common.js"
}
}
}


下面是对前面代码段的解释：

• @(.*)$：which 以“@”开头，并以字面上的 which（(.*)$）继续，直到字符串的末尾，使用括号将其分组。


• /src/$1：是一个特殊的玩笑词，意思是根目录。然后，我们将其映射到src并使用$1附加(.*)语句中的 whatever 子句。

例如，当您从src或test文件夹导入时，@/components/MessageList将映射到../src/components/MessageList。

就是这样。现在，您甚至可以更新您的App.test.js文件以使用别名，因为它可以在测试中使用：

import { shallowMount } from "@vue/test-utils";
import App from "@/App";
// ...


此外，它还适用于.vue和.js文件。

通常，为了方便起见，会使用多个别名，因此，您可以使用多个别名，而不是仅使用一个@来定义根文件夹。例如，假设您有一个actions文件夹和一个models文件夹。如果为每个文件夹创建别名，然后移动文件夹，则只需更改别名，而不是更新代码库中对它的所有引用。这就是模块别名的威力——它们使您的代码库更易于维护和清理。

现在，让我们为build/webpack.base.conf.js添加一个components别名：

module.exports = {
// ...
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
vue$: "vue/dist/vue.esm.js",
"@": path.join(__dirname, "..", "src"),
components: path.join(__dirname, "..", "src", "components")
}
}
};


然后，我们也只需要将其添加到package.json中的 Jest 配置中：

{
"jest": {
"moduleNameMapper": {
"@(.*)$": "/src/$1",
"components(.*)$": "/src/components/$1",
"^vue$": "vue/dist/vue.common.js"
}
}
}


就这么简单。现在，我们可以在App.vue中尝试使用两种形式：

import MessageList from "components/MessageList";
import Message from "@/components/Message";


停止并重新运行测试，这样应该可以工作。你也可以跑npm start试试。

我看过巴别塔插件网页包别名（https://github.com/trayio/babel-plugin-webpack-alias ），特别用于摩卡（等其他测试框架 https://mochajs.org/ ），它没有模块映射器。

我自己也没有试过，因为 Jest 已经提供给你了，但是如果你已经试过，或者想试一下，请分享一下它是如何进行的。

添加模块别名非常简单，可以使代码库更干净，更易于维护。玩笑也使定义它们变得非常容易；你只需要保持与网页别名的同步，你就可以说再见点地狱参考。

您可以在GitHub（上找到与本章相关的工作代码 https://github.com/alexjoverm/vue-testing-series/tree/Enhance-Jest-configuration-with-Module-Aliases ）。