11、Babel 插件的单元测试

• 单测就是文档，可以根据单测了解插件的功能
• 代码改动跑一下单测就知道功能是否正常，快速回归测试，方便后续迭代

那 babel 插件应该怎样做单测？

babel 插件单元测试的方式

babel 插件做的事情就是对 AST 做转换，几种测试方式：

• 测试转换后的 AST，是否符合预期
• 测试转换后生成的代码，是否符合预期（如果代码比较多，可以存成快照，进行快照对比）
• 转换后的代码执行一下，测试是否符合预期

分别对应的代码（使用 jest）：

AST测试

这种测试方法就是判断AST 修改的对不对

it('包含hao', () => {
  const {ast} = babel.transform(input, {plugins: [plugin]});
  
  const program = ast.program;
  const declaration = program.body[0].declarations[0];
  
  assert.equal(declaration.id.name, 'hao');// 判断 AST 节点的值
});

生成代码的快照测试

这种测试方法是每次测试记录下快照，后面之前的对比下：

it('works', () => {
  const {code} = babel.transform(input, {plugins: [plugin]});
  
  expect(code).toMatchSnapshot();
});

执行测试

这种测试就是执行下转换后的代码，看执行是否正常：

it('替换baz为foo', () => {
  var input = `
    var foo = 'hao';
    // 把baz重命名为foo
    var res = baz;
  `;
  
  var {code} = babel.transform(input, {plugins: [plugin]});
  
  var f = new Function(`
    ${code};
    return res;
  `);
  var res = f();
  
  assert(res === 'hao', 'res is hao');
});

这三种方式都可以，一般还是第二种方式用的比较多，babel 也是封装了这种方式，提供了 babel-plugin-tester 包。

babel-plugin-tester

babel-plugin-tester 就是对比生成的代码的方式来实现的。

可以直接对比输入输出的字符串，也可以对比文件，还可以对比快照：

uppercase-vars-plugin.js

module.exports = function () {
  return {
    visitor: {
      Identifier(path) {
        path.node.name = path.node.name.toUpperCase();
      },
    },
  };
};

uppercase-vars-plugin.test.js

import pluginTester from 'babel-plugin-tester';
import uppercaseVarsPlugin from './uppercase-vars-plugin';

pluginTester({
  plugin: uppercaseVarsPlugin,
  pluginName: 'uppercase-vars-plugin',
  tests: [
    {
      title: 'Convert variable names to uppercase',
      code: 'const myVar = 42;',
      output: 'const MYVAR = 42;',
    },
    {
      title: 'Works with multiple variables',
      code: 'let foo = "bar", baz = 123;',
      output: 'let FOO = "bar", BAZ = 123;',
    },
    {
      title: 'Does not change function names',
      code: 'function test() {}',
      output: 'function TEST() {}', // Assuming the plugin should change this too
    },
  ],
});

安装

npm install babel-plugin-tester --save-dev

运行

npx jest uppercase-vars-plugin.test.js