开玩笑地自动替换导入

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 中的等价物是什么？ 我不想为每个测试都写这个，因为被测单元可能不直接使用任何连接器，但可能依赖于使用它们自己的连接器的其他模块（例如，使用菜单的模式视图，它使用一个 function 检查是否应该显示调用后端并被模拟的菜单条目）

我开玩笑地发现了一个叫做moduleNameMapper的东西，但我不知道如何使用它。 这是 go 的正确方法吗？ 我该如何调试它？

我当前的 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()将做模拟的东西。