Jest test ESM

Cannot use import statement outside a module

jest 本身支持 ESM，即单测可以如此写

// src/lib/lite-lodash.js

export isPromise(...) { ... }
复制代码

// test/lib/lite-lodash.test.js

import { isPromise } from '../../src/lib/lite-lodash'

describe(...)
复制代码

但是当 lite-lodash.js 出现 import xx from yy 则会报错。其实是不识别被测试文件内的 import，需要 babel 援手。

Cannot use import statement outside a module

解法

第一步：安装 babel-jest

第二步：touch babel.config.js

// only used by jest 不应该影响业务代码构建！
module.exports = { presets: ['@babel/preset-env'] };
复制代码

第三步：jest.config.js

module.exports = {
+  transform: {
+    "^.+\\.(js|jsx)$": "babel-jest",
+  }
};
复制代码

alias

配置文件别名 alis 可以解决 import 需要脑力计算路径问题，在 webpack 或 TS 中我们常用的开发体验优化措施，比如

// jsconfig.json

{
  "compilerOptions": {
    "checkJs": true,
    "target": "es2015",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["dist", "node_modules", "**/node_modules/*"]
}
复制代码

但是麻烦来了如果你测试的文件含有

import '@/common/lib/xxx'
复制代码

则 jest 会抱怨找不到文件

Cannot find module ‘@/common/tools/format’ from ‘test/common/tools/url.test.js’

解法

jest.config.js

+ 'moduleNameMapper': {
+   '^@/(.*)': '<rootDir>/src/$1',
+ },
复制代码

总结

Jest 默认支持 ESM 固然很好，但是支持不全面官方也说了，故需要 babel 援助。mocha 支持 ESM 只需以下修改，更方便。

安装 esm，然后修改 test：

"scripts": {
+  "test": "node -r esm ./node_modules/.bin/mocha"
复制代码