refactor: Add typeof window check to createConfig (#976)

src/appWithTranslation.test.tsx → src/appWithTranslation.client.test.tsx

@@ -26,11 +26,13 @@ const DummyApp = appWithTranslation(() => (
 
 const renderComponent = () =>
   render(
-    <DummyApp pageProps={{
-      _nextI18Next: {
-        initialLocale: 'en',
-      },
-    }} />
+    <DummyApp
+      pageProps={{
+        _nextI18Next: {
+          initialLocale: 'en',
+        },
+      }}
+    />
   )
 
 describe('appWithTranslation', () => {
@@ -59,7 +61,8 @@ describe('appWithTranslation', () => {
     expect(args[0].i18n.language).toEqual('en')
     expect(args[0].i18n.isInitialized).toEqual(true)
 
-    expect(fs.existsSync).toHaveBeenCalledTimes(1)
-    expect(fs.readdirSync).toHaveBeenCalledTimes(1)
+    expect(fs.existsSync).toHaveBeenCalledTimes(0)
+    expect(fs.readdirSync).toHaveBeenCalledTimes(0)
   })
+
 })

src/appWithTranslation.server.test.tsx

@@ -0,0 +1,67 @@
+/**
+ * @jest-environment node
+ */
+
+import React from 'react'
+import fs from 'fs'
+import { I18nextProvider } from 'react-i18next'
+import { renderToString } from 'react-dom/server'
+
+import { appWithTranslation } from './appWithTranslation'
+
+jest.mock('fs', () => ({
+  existsSync: jest.fn(),
+  readdirSync: jest.fn(),
+}))
+
+const DummyI18nextProvider = ({ children }) => (
+  <>{children}</>
+)
+
+jest.mock('react-i18next', () => ({
+  I18nextProvider: jest.fn(),
+  __esmodule: true,
+}))
+
+
+const DummyApp = appWithTranslation(() => (
+  <div>Hello world</div>
+))
+
+const renderComponent = () =>
+  renderToString(
+    <DummyApp
+      pageProps={{
+        _nextI18Next: {
+          initialLocale: 'en',
+        },
+      }}
+    />,
+  )
+
+describe('appWithTranslation', () => {
+  beforeEach(() => {
+    (fs.existsSync as jest.Mock).mockReturnValue(true);
+    (fs.readdirSync as jest.Mock).mockReturnValue([]);
+    (I18nextProvider as jest.Mock).mockImplementation(DummyI18nextProvider)
+  })
+  afterEach(jest.resetAllMocks)
+
+
+  it('returns an I18nextProvider', () => {
+    renderComponent()
+    expect(I18nextProvider).toHaveBeenCalledTimes(1)
+
+    const [args] = (I18nextProvider as jest.Mock).mock.calls
+
+    expect(I18nextProvider).toHaveBeenCalledTimes(1)
+    expect(args).toHaveLength(3)
+    expect(args[0].children).toBeTruthy()
+    expect(args[0].i18n.addResource).toBeTruthy()
+    expect(args[0].i18n.language).toEqual('en')
+    expect(args[0].i18n.isInitialized).toEqual(true)
+
+    expect(fs.existsSync).toHaveBeenCalledTimes(1)
+    expect(fs.readdirSync).toHaveBeenCalledTimes(1)
+  })
+})

src/config/createConfig.test.ts

@@ -14,6 +14,7 @@ describe('createConfig', () => {
   describe('server side', () => {
     beforeAll(() => {
       Object.assign(process, { browser: false })
+      delete global.window
     })
 
     describe('when filesystem is as expected', () => {
@@ -139,6 +140,7 @@ describe('createConfig', () => {
   describe('client side', () => {
     beforeAll(() => {
       Object.assign(process, { browser: true })
+      global.window = {} as any
     })
 
     it('throws when lng is not provided', () => {

src/config/createConfig.ts

@@ -41,7 +41,7 @@ export const createConfig = (userConfig: UserConfig): InternalConfig => {
     combinedConfig.fallbackLng = combinedConfig.defaultLocale
   }
 
-  if (!process.browser) {
+  if (!process.browser && typeof window === 'undefined') {
     combinedConfig.preload = locales
 
     const hasCustomBackend = userConfig?.use?.some((b) => b.type === 'backend')

src/config/defaultConfig.ts

@@ -13,7 +13,7 @@ export const defaultConfig = {
     locales: LOCALES,
   },
   get initImmediate(): boolean {
-    return process.browser
+    return process.browser && typeof window !== 'undefined'
   },
   interpolation: {
     escapeValue: false,