自动替换jest中的导入

Question

我正在尝试为一个更复杂的应用程序设置一个测试平台。我们有一个问题，我们的应用程序想要调用后端代码，为了保持测试平台的速度，需要对其进行模拟。因此，每个模块有两个文件：

connector.ts和connector.mocked.ts第一个包含“活动”代码，第二个包含一些模拟/虚拟实现。在我们的模块中，我们只需执行以下操作即可导入它们

import {...} from './connector.ts'

这将直接在我们的应用程序中执行，或者在故事书中将被重写到connector.mocked.ts。在Storybook中，这发生在全局配置中：

module.exports = {
  ...
  webpackFinal: (config) => {
    ...
    config.resolve.alias = {
      ...config.resolve.alias,
      './connector': './connector.mocked',
      '@': path.resolve(__dirname, '..'),
    }
  }
}

在Jest中与此对应的是什么？我不想为每个测试写这个，因为被测试的单元可能不会直接使用任何连接器，而是可能依赖于其他使用自己连接器的模块(例如，Modal-View，它使用一个菜单，它使用一个函数来检查是否应该显示调用后端并被模拟的菜单项)。

我在jest中找到了一个名为moduleNameMapper的东西，但我不知道如何使用它。这条路对吗？我如何调试它？

我当前的Jest-Config：

module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'jsdom',
    testPathIgnorePatterns: ['jest-setup.spec.ts'],
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
    moduleNameMapper: {
        '@/(.*)$': '<rootDir>/$1',
        // '.\\/connector': './connector.mocked.ts', // does not work
    },
    setupFilesAfterEnv: ['<rootDir>/jest-setup.spec.ts'],
};

Answer 1

您需要在moduleNameMapper中交换密钥的顺序。所以它是这样的：

moduleNameMapper: {
    '@/(.*)connector(.ts)?$': '<rootDir>/$1connector.mock',
    '@/(.*)$': '<rootDir>/$1'
}

然后在你的屏幕上你做了

import { something } from '@/connector'

something() // live connector

但是您的规范文件将导入@/connector.mock，而something()将执行模拟操作。