如何用Vitest模拟依赖关系

Question

我有一个带有 vite 的测试设置，并且有一个依赖项的依赖项，需要一些模拟选项才能正常运行，我目前将它放在一个

__mocks__/nestedDependency.js

文件中。 另外，在我的

test/setup.ts

文件中，我有一个

vi.mock('nestedDependency')

，但它似乎没有以任何方式捕获它

我之前使用

jest

进行了设置，并且这个确切的设置有效。我从该设置迁移的唯一一件事是不再使用

jest.requireActual('nestedDependency')

我现在使用

vi.importActual('nestedDependency')

来实现我的模拟目的。

Answer 1

我面临着同样的问题，我的解决方案可能可以帮助你。我在 monorepo 中。顶级包是

panel

，需要

state

和

common

。

state

还需要

common

。我需要将

common

嘲笑为相同，即使它嵌套在

state

中。

我意识到，当我运行

panel

的测试时，

state

将通过它的捆绑包进行访问，该捆绑包使用

require

调用，

vitest

不会模拟。

我更新了我的测试配置以使用

alias

// the source code only uses import
const unbundledState = resolve(__dirname, '../state/src/index');

export default defineConfig({
  test: {
    environment: 'jsdom',
    setupFiles: ['./tests/test.setup'],
    globalSetup: ['./tests/test.global'],
    alias: {
      '@cai/state': unbundledState,
    },
  },
});

这使得

vitest

贯穿于

import

语句而不是

require

语句，因此事情被嘲笑了。因此，如果嵌套依赖项在捆绑之前恰好使用

import

，我的解决方案就有效。

这让我想，如果不是的话，类似 proxyquire 的东西也可以为你工作。

Answer 2

仔细检查您是否已按顺序获得所有 devDependency。看看你的

package.json

，确保你已经安装了

@vitejs/plugin-vue

和任何其他与测试相关的朋友，并放松一下。

接下来，回顾一下你的项目结构：

• 确保您的

  __mocks__

  目录位于项目的顶层。
• 确保

  nestedDependency.js

  文件紧贴在该

  __mocks__

  文件夹内。

现在，对于您的

test/setup.ts

文件中的嘲笑魔法：

• 你提到了

  vi.mock('nestedDependency')

  ，但这不太正确。相反，您通常想做这样的事情：

  import { mock } from 'jest';
  mock('nestedDependency');
  

我们不要忘记您的导入声明。如果您使用

vi.importActual('nestedDependency')

，请确保在测试文件中正确拉入实际模块：

 `import { nestedDependency } from 'nestedDependency';`

现在，Vite 配置本身可能需要一些微调：

• 确保您的

  vite.config.js

  设置正确以处理模块和模拟。您可能需要通过添加如下内容来引导 Vite 处理模拟：

  export default {
    ...,
    optimizeDeps: {
      include: ['nestedDependency'], // Add your dependency here
    },
  };
  

如果你在完成这一切之后仍然摸不着头脑，请不要忘记清除 Vite 缓存并重建你的项目：

  vite build --clearCache

如果您仍然在用头撞墙，请告诉我一些有关您的项目结构的更多详细信息，您到底想要做什么，以及任何让您悲伤的错误消息。