如何使用 vitest 将 svg 导入作为组件来测试 Next.js 应用程序？

Question

我按照此处的官方示例使用 vitest 来测试 Next.js 应用程序。

我收到错误消息“InvalidCharacterError：“../../company-logo.svg”与名称生产不匹配”。最后我发现图像是因为 svg 作为组件导入的。当我将 svg 导入作为组件删除时，它工作得很好。

我用来@svgr/webpack将 svg 作为组件加载到我的 Next.js 13 应用程序中。我尝试添加vite-plugin-svgr但vitest.config.ts它不起作用。

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import svgr from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths(), svgr()],
  test: {
    environment: "jsdom",
  },
});

有什么办法可以解决这个问题吗？

Answer 1

我遇到了同样的问题，我也使用 Next13 我最终通过在 vite.config.js 中使用vite-plugin-magical-svg目标来修复它react

plugins: [graphql(), magicalSvg({ target: 'react' })]

希望它对你有用！