Jest 模拟 ES6 模块答案

【问题标题】：Jest mock ES6 moduleJest 模拟 ES6 模块
【发布时间】：2018-11-02 02:14:19
【问题描述】：

如何使用 Jest 模拟 ES6 模块导入？例如我们有以下结构：

// ../store.js
function getData(data) {
  return data / 3;
}
export { getData };

// ../myModule.js
import { getData } from './store';

function myModule(param) {
  return getData(param) * 4;
}

export { myModule };

// ./myModule.test.js
import { myModule ] from '../myModule';

test('2 x 4 equal 8', () => {
  expect(getData(6)).toBe(8);
});

【问题讨论】：

标签： javascript unit-testing jestjs es6-modules

【解决方案1】：

要模拟 ES2015 模块，您的 jest 配置需要先使用 babel 转换模块。

你会想yarn add --dev babel-jest babel-preset-env

然后你的 package.json 应该如下所示：

 "jest": {
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$",
      "^.+\\.module\\.css$"
    ]
  }

其次，在您的.babelrc 中，您需要为test 指定您的环境，如下所示：

{
  "presets": [
    ["env", "react"]
  ],
  "env": {
    "development": {
      "presets": [["env"], "react"]
    },
    "production": {
      "presets": [["env"], "react"]
    },
    "test": {
      "presets": [["env"], "react"]
    }
  }
}

完成后，您可以模拟一个模块。例如，创建一个名为 __mocks__/store.js 的文件（其中 mocks 文件夹与您的 store.js 文件处于同一级别。在您的 mocks 文件中，您可以执行类似的操作

const getData = () => return 42;
export { getData };

在您的myModule.test.js 中，您需要这一行： jest.mock('./store');

如果需要，您可以在此处查看我的一个存储库中的一个工作示例： https://github.com/AnilRedshift/linkedINonymous/

【讨论】：

【解决方案2】：

如果你想用 jest 进行自动化测试，你必须在测试之前包含/描述下一次调用

jest.mock('../myModule');

它从所有函数返回 void 结果。

其他选择是模拟混合：

const mock: any = jest.genMockFromModule('../myModule'); 
mock.getData = jest.fn().mockImplementation(6);

调用getData方法返回6。

【讨论】：