它是模拟ES6模块

Posted 2021-03-28

如何使用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);
});

答案

要模拟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/

另一答案

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

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

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

其他替代方案是模拟混合：

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

对方法getData的调用返回6。