babel-jest ES2015 导入语句

Posted

技术标签:

【中文标题】babel-jest ES2015 导入语句【英文标题】:babel-jest ES2015 import statements 【发布时间】:2016-02-26 06:10:35 【问题描述】:

有没有人使用 es2015 语法编写 jasmine / jest 测试?它需要多少 shimming / polyfill / gerrymandering?

我无法正确导入函数。我有一个模块: …./utils/TweetUtils.js

'use strict';

export function getListOfTweetIds (tweets) 
  return Object.keys(tweets);
;

和一个测试套件:

…./__tests__/TweetUtils-test.js

'use strict';
jest.dontMock('../TweetUtils');
import * as TweetUtils from '../TweetUtils';

describe('Tweet utilities module', () => 

  it('has access to the TweetUtils methods', () => 

    let testObj = a:'a',b:'b',c:'c';
    // Passes
    expect(TweetUtils.getListOfTweetIds).toBeDefined();
    // Passes
    expect(typeof TweetUtils.getListOfTweetIds).toBe('function');
    // Fails
    expect(TweetUtils.getListOfTweetIds(testObj)).toBeTruthy();
  );
);

如果我用这样的东西将控制台输出破解到套件中:expect(‘’).toBe(TweetUtils);

茉莉花报告:

- Expected: '' toBe: 
      default: 
          getListOfTweetIds: Function
      ,
      getListOfTweetIds: Function
  

所以看起来 import 语句正在做某事,但它显然没有诚实地导入我的方法。当我使用命名函数语法导入时,我得到了相同的结果:import getListOfTweetIds from ‘../TweetUtils’; 但如果我使用默认语法:import getListOfTweetIds from ‘../TweetUtils’; 第二个规范失败了——不再是typeof function,而是typeof object // => default: Function

我一直在梳理文档和未解决的问题。几个月来一直存在相关问题,但已知问题似乎不正确。我尝试导入我的 jest.dontMock 语句以避免提升,大约:https://github.com/babel/babel-jest/issues/16 但没有骰子。

如果我将 TweetUtils.js 修改为使用 module.exports = function… 并使用 const myFunction = require(‘../TweetUtils’) 将其带入套件,一切正常,但我并不觉得我在引导真正的 ES2015 魔法。在生态系统赶上新语法的同时,每个人现在都只是在处理不稳定的变通方法吗?

【问题讨论】:

【参考方案1】:

正如你所说,import 语句被提升,它会导致 jest 自动模拟功能出现问题(模块是在 你告诉 jest 取消模拟之前导入的)。

TweetUtils.getListOfTweetIds 已正确导入,但已被模拟,因此每个调用都返回 undefined。这就是第三个期望失败的原因。

导入jest.dontMock 语句可以工作(我测试过),但对我来说听起来很脏(你真的想为每个测试模块创建一个“dontmock 模块”文件吗?)

您必须对测试模块使用require 语法。替换

import * as TweetUtils from '../TweetUtils';

const TweetUtils = require('../TweetUtils');

在我修复它之前的玩笑示例中是相同的:jest#379

【讨论】:

就我而言,这仅在我添加 .default: const TweetUtils = require('../TweetUtils').default; 时有效【参考方案2】:

问题似乎出在 babel 而不是 jest 。试试这个解决方案。

如果您使用的是“create-react-app”,请安装这些开发依赖项:

"babel-cli": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-preset-react-app": "^3.1.1",

同时更新.babelrc(如果不存在则创建此文件):


"presets": [
    "@babel/preset-env",
    "@babel/preset-react"
      ]

现在 jest 和 npm test 都可以正常工作了。

【讨论】:

以上是关于babel-jest ES2015 导入语句的主要内容,如果未能解决你的问题,请参考以下文章

带有 ES6 模块的 babel-jest

ESlint 在编译 es6 导入/导出语句时失败

在 Typescript 编译期间在相对导入语句上附加 .js 扩展名(ES6 模块)

ES11的新特性:String 的 matchAll 方法 import() 动态导入语句等

ES6 import 语句中花括号的用途是啥?

ES6 - 使用 import 语句在类上声明原型方法