diff --git a/src/i18n/__tests__/initialRender.test.tsx b/src/i18n/__tests__/initialRender.test.tsx new file mode 100644 index 0000000..5584d4e --- /dev/null +++ b/src/i18n/__tests__/initialRender.test.tsx @@ -0,0 +1,36 @@ +// @vitest-environment jsdom +import { render, act } from '@testing-library/react'; +import { LanguageProvider, useTranslation } from '../index'; +import { describe, it, expect } from 'vitest'; + +describe('LanguageProvider Initial Render', () => { + it('should verify initial render count', async () => { + let renderCount = 0; + + const Consumer = () => { + useTranslation(); + renderCount++; + return null; + }; + + render( + + + + ); + + // Wait for any effects to run + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 10)); + }); + + // After optimization, renderCount should be 1. + // Previously it was 2. + expect(renderCount).toBe(1); + + // Verify lang attribute is set (getInitialLanguage defaults to 'de' in jsdom if window undefined, + // but in jsdom window IS defined. navigator.language usually defaults to en-US in jsdom) + // We just check it's set to something valid ('en' or 'de') + expect(['en', 'de']).toContain(document.documentElement.lang); + }); +}); diff --git a/src/i18n/index.tsx b/src/i18n/index.tsx index 7be82f7..9b428a6 100644 --- a/src/i18n/index.tsx +++ b/src/i18n/index.tsx @@ -27,13 +27,7 @@ function getInitialLanguage(): Language { } export function LanguageProvider({ children }: { children: ReactNode }) { - const [language, setLanguageState] = useState('de'); - const [isInitialized, setIsInitialized] = useState(false); - - useEffect(() => { - setLanguageState(getInitialLanguage()); - setIsInitialized(true); - }, []); + const [language, setLanguageState] = useState(getInitialLanguage); const setLanguage = useCallback((lang: Language) => { setLanguageState(lang); @@ -42,10 +36,8 @@ export function LanguageProvider({ children }: { children: ReactNode }) { }, []); useEffect(() => { - if (isInitialized) { - document.documentElement.lang = language; - } - }, [language, isInitialized]); + document.documentElement.lang = language; + }, [language]); const value = useMemo(() => ({ language,