从jest尝试切换到vitest出现 Failed to resolve import

[Jinx-1120]

相关平台

微信小程序

复现仓库

https://github.com/Jinx-1120/test-taro-vitest.git 小程序基础库: 3.0.0 使用框架: React

复现步骤

pnpm i

pnpm run test

期望结果

希望vitest能够正常运行

实际结果

Error: Failed to resolve import "@tarojs/components/dist/components" from "node_modules/@tarojs/components/lib/react/components.js". Does the file exist?

环境信息

👽 Taro v3.6.20

  Taro CLI 3.6.20 environment info:
    System:
      OS: macOS 14.3.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.18.0 - ~/Library/Caches/fnm_multishells/32937_1710754364518/bin/node
      Yarn: 4.0.2 - ~/Library/Caches/fnm_multishells/32937_1710754364518/bin/yarn
      npm: 9.8.1 - ~/Library/Caches/fnm_multishells/32937_1710754364518/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.20 => 3.6.20 
      @tarojs/components: 3.6.20 => 3.6.20 
      @tarojs/helper: 3.6.20 => 3.6.20 
      @tarojs/plugin-framework-react: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-alipay: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-h5: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-jd: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-qq: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-swan: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-tt: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-weapp: 3.6.20 => 3.6.20 
      @tarojs/react: 3.6.20 => 3.6.20 
      @tarojs/runtime: 3.6.20 => 3.6.20 
      @tarojs/shared: 3.6.20 => 3.6.20 
      @tarojs/taro: 3.6.20 => 3.6.20 
      @tarojs/taro-loader: 3.6.20 => 3.6.20 
      @tarojs/webpack5-runner: 3.6.20 => 3.6.20 
      babel-preset-taro: 3.6.20 => 3.6.20 
      eslint-config-taro: 3.6.20 => 3.6.20 
      react: ^18.0.0 => 18.2.0

[Jinx-1120]

在业务场景中只需要对组件进行单元测试，对于业务侧的场景基本不会写测试case。对于taro相关的api完全可以通过mock去做，因此vitest理论上也是可以运行的？

[Jinx-1120]

在jest中可以通过moduleNameMapper: { '@tarojs/taro$': resolve(__dirname, './runtime/taro-h5.js'), '@tarojs/components$': '@tarojs/components/lib/react/index' }, 对@tarojs/taro和@tarojs/components做映射 同样的切换到vitest之后使用resolve.alias进行类似的映射处理 resolve: { alias: { '@tarojs/components': '@tarojs/components/lib/react/index.js', '@tarojs/taro': '@tarojs/taro-h5', }, }, 但是运行vitest会出现： Error: Failed to resolve import "@tarojs/components/dist/components" from "node_modules/.pnpm/@tarojs+components@3.6.20_@types+react@17.0.78_postcss@8.4.36_react@18.2.0/node_modules/@tarojs/components/lib/react/components.js". Does the file exist?

[Jinx-1120]

@ZakaryCode 大佬有什么建议或者解决方案吗？

[master1lan]

``我成功迁移到vitest了，只需要注意两点：

1. 如果是单元测试，没有引入taro相关api可以直接用vitest，不会报错。
2. 如果是集成测试，虽然taro文档里面有一个jest库，但是不能直接在vite里面使用；我们需要自己添加以下配置： export default defineConfig({ //需要在最外层的resolve添加映射，否则需要自行在setup文件内一一进行mock resolve: { alias: { '@tarojs/components': '@tarojs/components/dist-h5/react', '@tarojs/taro': '@tarojs/taro-h5', '@': path.resolve(__dirname, 'src'), }, }, test: { globals: true, environment: 'jsdom', // 这个文件内执行初始化 setupFiles: './vitest.setup.js', include: ['src/**/*.test.{js,jsx,ts,tsx}'], // 不建议解析css文件 css: false, }, // 最关键的是esbuild跳过taro编译 esbuild: { loader: 'tsx', include: [/src\/.*\.[jt]sx?$/], exclude: /node_modules\/(?!@taro)/, }, }) 然后在vitest.setup.js文件内导入testing-library import '@testing-library/jest-dom/vitest'; 就可以愉快的使用testing-library和vitest进行集成测试了！ import Alert from '.'; import { describe, expect, test } from 'vitest'; import { render, fireEvent } from '@testing-library/react'; describe('Alert', () => { test('测试渲染', async () => { const msg = '123321'; const { container } = render(<Alert message={msg} />); expect(container.querySelector(.finance-alert__msg)?.innerHTML).toMatch(msg); }); });