npm 包 babel-plugin-rewire-exports 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 babel-plugin-rewire-exports

babel-plugin-rewire-exports 是一个 Babel 插件，它提供了一种新的方式来测试 JavaScript 模块。这个插件允许你使用类似于 “单元测试重写” 或 “基于依赖注入的测试模块” 所提供的功能，去测试有依赖关系的模块（比如 ES6 模块），而无需每次测试的时候都要重新启动、重建应用并重新调整模块的环境。

babel-plugin-rewire-exports 的功能

该插件提供了三个新的语法：

$stub：通过这个语法，你可以使用任意的值来替换对应模块或导出值。

import { $stub } from 'babel-plugin-rewire-exports'

let myVal = $stub()
export default myVal

在你的测试代码中，你可以用下面的方式改变该导出值：

import myVal from './myModule'

rewire(myModule).__set__('myVal', 123)
// or
rewire(myModule).__Rewire__('myVal', 123)

assert.equal(myVal, 123)

$mock：通过这个语法，你可以模拟任意导出值。

import { $mock } from 'babel-plugin-rewire-exports'

const myFn = $mock()
export default myFn

在你的测试代码中，你可以用下面的方式改变该导出值：

import myFn from './myModule'

rewire(myModule).__set__('myFn', function() { return 123 })
// or
rewire(myModule).__Rewire__('myFn', function() { return 123 })

assert.equal(myFn(), 123)

$reset：这个语法允许你重置所有导出值。

import { $reset } from 'babel-plugin-rewire-exports'

export const myVal = 'original'

export function myFn() {
  return myVal
}

在你的测试代码中，你可以用下面的方式重置所有导出值：

import * as myModule from './myModule'

rewire(myModule).__ResetAll__()

assert.equal(myModule.myVal, 'original')
assert.equal(myModule.myFn(), 'original')

安装 babel-plugin-rewire-exports

在命令行中安装 babel-plugin-rewire-exports:

npm install --save-dev babel-plugin-rewire-exports

在你的 .babelrc 或 babel-loader 配置文件中加入该插件:
```
{
  "plugins": ["babel-plugin-rewire-exports"]
}
```

示例代码

myModule.js

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

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

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

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

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

myModule.test.js

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

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

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

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

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

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

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

结论

我们已经介绍了 babel-plugin-rewire-exports 的一些介绍，以及如何使用它测试 JavaScript 模块。根据上述示例代码和教程，你可以看到这个插件是如何简单易用，和它的学习以及指导意义。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/168440