feat: add custom i18n wrapper test case

Author: caohuilin

tests/integration/i18n/custom-i18n-wrapper/modern.config.ts

@@ -0,0 +1,26 @@
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { i18nPlugin } from '@modern-js/plugin-i18n';
+
+export default defineConfig({
+  performance: {
+    buildCache: false,
+  },
+  server: {
+    publicDir: './locales',
+  },
+  plugins: [
+    appTools(),
+    i18nPlugin({
+      localeDetection: {
+        languages: ['en', 'zh'],
+        fallbackLanguage: 'en',
+        localePathRedirect: true,
+        i18nextDetector: true,
+      },
+      backend: {
+        enabled: true,
+        sdk: true,
+      },
+    }),
+  ],
+});

tests/integration/i18n/custom-i18n-wrapper/package.json

@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "name": "i18n-custom-i18n-wrapper",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "modern dev",
+    "build": "modern build"
+  },
+  "dependencies": {
+    "i18next": "25.6.3",
+    "react-i18next": "15.7.4",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "@modern-js/runtime": "workspace:*",
+    "@modern-js/plugin-i18n": "workspace:*"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "workspace:*"
+
+  }
+}

tests/integration/i18n/custom-i18n-wrapper/src/App.tsx

@@ -0,0 +1,57 @@
+import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
+import { useEffect, useState } from 'react';
+
+export default function App() {
+  const { language, changeLanguage, i18nInstance } = useModernI18n();
+  const [text, setText] = useState('');
+
+  // 更新文本的函数
+  const updateText = () => {
+    if (i18nInstance) {
+      setText((i18nInstance as any).t('key'));
+    }
+  };
+
+  useEffect(() => {
+    // 初始更新
+    updateText();
+
+    // 监听资源加载和语言变更事件
+    const loadedHandler = () => {
+      updateText();
+    };
+    const languageChangedHandler = () => {
+      updateText();
+    };
+
+    if (i18nInstance) {
+      i18nInstance.on?.('loaded', loadedHandler);
+      i18nInstance.on?.('languageChanged', languageChangedHandler);
+    }
+
+    return () => {
+      if (i18nInstance) {
+        i18nInstance.off?.('loaded', loadedHandler);
+        i18nInstance.off?.('languageChanged', languageChangedHandler);
+      }
+    };
+  }, [i18nInstance]);
+
+  // 当语言改变时，立即更新文本（因为资源可能已经加载）
+  useEffect(() => {
+    updateText();
+  }, [language, i18nInstance]);
+
+  return (
+    <div>
+      <h1 id="sdk-text">{text}</h1>
+      <p id="current-lang">Current Language: {language}</p>
+      <button id="switch-en" onClick={() => changeLanguage('en')}>
+        Switch to EN
+      </button>
+      <button id="switch-zh" onClick={() => changeLanguage('zh')}>
+        切换到中文
+      </button>
+    </div>
+  );
+}

tests/integration/i18n/custom-i18n-wrapper/src/i18n.ts

@@ -0,0 +1,24 @@
+import i18next from 'i18next';
+
+const instance = i18next.createInstance();
+
+instance.init({
+  lng: 'en',
+  fallbackLng: 'en',
+  resources: {
+    en: {
+      translation: {
+        key: 'Hello World from HTTP',
+        about: 'About page from HTTP',
+      },
+    },
+    zh: {
+      translation: {
+        key: '你好，世界（HTTP）',
+        about: '关于（HTTP）',
+      },
+    },
+  },
+});
+
+export default instance;

tests/integration/i18n/custom-i18n-wrapper/src/mock-sdk.ts

@@ -0,0 +1,24 @@
+import type { Resources } from '@modern-js/plugin-i18n/runtime';
+
+const baseResources: Resources = {
+  en: {
+    translation: {
+      key: 'Hello World from SDK',
+      about: 'About page from SDK',
+    },
+  },
+  zh: {
+    translation: {
+      key: '你好，世界（SDK）',
+      about: '关于（SDK）',
+    },
+  },
+};
+
+export function createMockSdkLoader() {
+  return async (_options: any): Promise<Resources> => {
+    console.log('mock sdk loader: fetching resources');
+    await new Promise(resolve => setTimeout(resolve, 100));
+    return baseResources;
+  };
+}

tests/integration/i18n/custom-i18n-wrapper/src/modern-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types='@modern-js/app-tools/types' />

tests/integration/i18n/custom-i18n-wrapper/src/modern.runtime.tsx

@@ -0,0 +1,16 @@
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { createMockSdkLoader } from './mock-sdk';
+import { createStarlingWrapper } from './starlingWrapper';
+
+const starlingWrapper = createStarlingWrapper();
+
+export default defineRuntimeConfig({
+  i18n: {
+    i18nInstance: starlingWrapper,
+    initOptions: {
+      backend: {
+        sdk: createMockSdkLoader(),
+      },
+    },
+  },
+});

tests/integration/i18n/custom-i18n-wrapper/src/starlingWrapper.ts

@@ -0,0 +1,96 @@
+import i18next from 'i18next';
+
+export function createStarlingWrapper() {
+  const inner = i18next.createInstance();
+
+  const wrapper = {
+    i18nInstance: inner,
+    plugins: [] as any[],
+    ignoreWarning: false,
+    init: async (config?: any, callback?: any) => {
+      const result = await inner.init(config, callback);
+      return { err: null, t: inner.t.bind(inner), ...result };
+    },
+    use(plugin: any) {
+      if (!plugin) {
+        return this;
+      }
+      if (typeof plugin.init === 'function') {
+        plugin.init(inner);
+      }
+      this.plugins.push(plugin);
+      inner.use(plugin);
+      return this;
+    },
+    setLang(lng: string) {
+      if (typeof inner.changeLanguage === 'function') {
+        return inner.changeLanguage(lng);
+      }
+      return Promise.resolve();
+    },
+    changeLanguage(lng: string) {
+      return inner.changeLanguage(lng);
+    },
+    get language() {
+      return inner.language;
+    },
+    get languages() {
+      return inner.languages;
+    },
+    t(...args: any[]) {
+      return inner.t.apply(inner, args as any);
+    },
+    // 事件系统：转发到内部的 i18next 实例
+    on(event: string, callback: (...args: any[]) => void) {
+      if (typeof inner.on === 'function') {
+        inner.on(event, callback);
+      }
+      return this;
+    },
+    off(event: string, callback?: (...args: any[]) => void) {
+      if (typeof inner.off === 'function') {
+        inner.off(event, callback);
+      }
+      return this;
+    },
+    emit(event: string, ...args: any[]) {
+      if (typeof inner.emit === 'function') {
+        inner.emit(event, ...args);
+      }
+      return this;
+    },
+    // 其他可能需要的属性
+    get isInitialized() {
+      return inner.isInitialized;
+    },
+    get options() {
+      return inner.options;
+    },
+    get store() {
+      return inner.store;
+    },
+    get services() {
+      return inner.services;
+    },
+    reloadResources(lng?: string, ns?: string) {
+      if (typeof inner.reloadResources === 'function') {
+        return inner.reloadResources(lng, ns);
+      }
+      return Promise.resolve();
+    },
+    cloneInstance(opts?: any) {
+      const cloned = inner.cloneInstance(opts);
+      const clonedWrapper = createStarlingWrapper();
+      clonedWrapper.i18nInstance = cloned;
+      clonedWrapper.plugins = [...this.plugins];
+      clonedWrapper.plugins.forEach((plugin: any) => {
+        if (typeof plugin.init === 'function') {
+          plugin.init(cloned);
+        }
+      });
+      return clonedWrapper;
+    },
+  } as any;
+
+  return wrapper;
+}

tests/integration/i18n/custom-i18n-wrapper/tests/index.test.ts

@@ -0,0 +1,72 @@
+import path from 'path';
+import puppeteer, { type Browser, type Page } from 'puppeteer';
+import {
+  getPort,
+  killApp,
+  launchApp,
+  launchOptions,
+} from '../../../../utils/modernTestUtils';
+
+const projectDir = path.resolve(__dirname, '..');
+
+describe('i18n-custom-i18n-wrapper', () => {
+  let app: Awaited<ReturnType<typeof launchApp>>;
+  let page: Page;
+  let browser: Browser;
+  let appPort: number;
+
+  beforeAll(async () => {
+    appPort = await getPort();
+    app = await launchApp(projectDir, appPort);
+    browser = await puppeteer.launch(launchOptions as any);
+    page = await browser.newPage();
+  });
+
+  afterAll(async () => {
+    if (browser) {
+      await browser.close();
+    }
+    if (app) {
+      await killApp(app);
+    }
+  });
+
+  const getText = async (selector: string) => {
+    await page.waitForSelector(selector, { timeout: 5_000 });
+    const el = await page.$(selector);
+    return page.evaluate(elm => elm?.textContent?.trim(), el);
+  };
+
+  test('loads HTTP resources first then refresh with SDK', async () => {
+    await page.goto(`http://localhost:${appPort}/en`, {
+      waitUntil: ['networkidle0'],
+    });
+
+    const initialText = await getText('#sdk-text');
+    expect(['Hello World from HTTP', 'Hello World from SDK']).toContain(
+      initialText,
+    );
+
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    expect(await getText('#sdk-text')).toBe('Hello World from SDK');
+  });
+
+  test('language switch keeps SDK merge', async () => {
+    await page.goto(`http://localhost:${appPort}/en`, {
+      waitUntil: ['networkidle0'],
+    });
+    await new Promise(resolve => setTimeout(resolve, 1500));
+
+    await page.click('#switch-zh');
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    const zhText = await getText('#sdk-text');
+    expect(['你好，世界（HTTP）', '你好，世界（SDK）']).toContain(zhText);
+
+    await page.click('#switch-en');
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    const backToEn = await getText('#sdk-text');
+    expect(['Hello World from HTTP', 'Hello World from SDK']).toContain(
+      backToEn,
+    );
+  });
+});

tests/integration/i18n/custom-i18n-wrapper/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "outDir": "dist",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@shared/*": ["./shared/*"]
+    }
+  },
+  "include": ["src", "tests", "modern.config.ts"]
+}