在现代的前端开发中,ES6 成为了最流行的 JavaScript 版本,在 ES6 中,我们可以使用「模块」的概念进行代码的封装和管理。而在 Jest 测试中,同样可以使用 ES6 模块,这样可以更好地组织我们的测试代码,使测试用例更加清晰和易于维护。
ES6 模块导入和导出的使用
ES6 模块有两种导入导出方式:命名导出和默认导出。
命名导出
命名导出需要通过关键字 export
来导出自定义的函数或变量,然后在需要使用这些函数或变量的文件中通过 import
导入使用。比如下面的示例:
-- -------- ------ ----- --- - ------ ----- -- ---- - ----- ------ ----- -------- - ------ ----- -- ---- - -----
-- ------- ------ - ---- -------- - ---- ------------- ----- --- - ------ --- ----- ---------- - ----------- --- ---------------- ------------ -- -- - -
默认导出
默认导出只能导出一个自定义的函数或变量,需要通过关键字 export default
来导出,默认导出的函数或变量可以在导入时任意指定名称。比如下面的示例:
-- -------- ------ ------- -------- --------- ----- - ------ ---- - ----- -
-- ------- ------ ----- ---- ------------- ----- ------ - -------- --- -------------------- -- -- -
Jest 中使用 ES6 模块
在 Jest 中使用 ES6 模块也很简单,只需要在配置文件 jest.config.js
中加入以下代码:
-------------- - - --------------------- ------- ---------- - ------------ ------------- -- ---------- ----------------- ----------------- - ----------- ------------------- -- --
其中要注意的是,需要使用 babel-jest
进行代码的转换,这需要安装 babel-jest
和 @babel/preset-env
两个包,通过在项目中添加 .babelrc
配置文件来告诉 Jest 如何进行转换:
- ---------- ---------------------- - ---------- - ------- --------- - --- -
比如我们有以下的测试文件:
-- ----------- ------ --- ---- ----------- ---------- - - - -- ----- --- -- -- - ------------- ------------ ---
-- ------ ------ ------- -------- ------ -- - ------ - - -- -
然后我们在命令行执行 npm run test
就可以看到测试通过了:
总结
在 Jest 中使用 ES6 模块可以更好地组织测试代码,使测试用例更加清晰易于维护。同时,我们也可以通过此来了解 ES6 中的模块概念以及导入导出的用法。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6462dc78968c7c53b03ea571