test(e2e): add case for SVG dynamic import (#1784)

e2e/cases/svg/svgr-query-react-dynamic-import/index.test.ts

@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test';
+import { build, gotoPage } from '@e2e/helper';
+
+// https://github.com/web-infra-dev/rsbuild/issues/1766
+test('should import default from SVG with react query and dynamic import correctly', async ({
+  page,
+}) => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    runServer: true,
+  });
+
+  await gotoPage(page, rsbuild);
+
+  await expect(
+    page.evaluate(`document.getElementById('component').tagName === 'svg'`),
+  ).resolves.toBeTruthy();
+
+  // test svg asset
+  await expect(
+    page.evaluate(`document.getElementById('url').src`),
+  ).resolves.toMatch(/http:/);
+
+  await rsbuild.close();
+});

e2e/cases/svg/svgr-query-react-dynamic-import/rsbuild.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginSvgr } from '@rsbuild/plugin-svgr';
+
+export default defineConfig({
+  plugins: [pluginReact(), pluginSvgr()],
+});

e2e/cases/svg/svgr-query-react-dynamic-import/src/App.jsx

@@ -0,0 +1,12 @@
+export async function getApp() {
+  const name = 'small';
+  const { default: Component } = await import(`./${name}.svg?react`);
+  const { default: url } = await import(`./${name}.svg?url`);
+
+  return () => (
+    <div>
+      <Component id="component" />
+      <img id="url" src={url} alt="url" />
+    </div>
+  );
+}

e2e/cases/svg/svgr-query-react-dynamic-import/src/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { getApp } from './App';
+
+async function main() {
+  const container = document.getElementById('root');
+  if (container) {
+    const App = await getApp();
+    const root = createRoot(container);
+    root.render(React.createElement(App));
+  }
+}
+
+main();