feat: migrate script to typescript (#3423)

components/languageSelector/LanguageSelect.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import i18nextConfig from '@/next-i18next.config';
+import i18nextConfig from '@/next-i18next.config.cjs';
 
 import type { SelectProps } from '../form/Select';
 import IconLanguage from '../icons/Language';

components/navigation/MobileNavMenu.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import React, { useState } from 'react';
 
-import i18nextConfig from '@/next-i18next.config';
+import i18nextConfig from '@/next-i18next.config.cjs';
 
 import { SearchButton } from '../AlgoliaSearch';
 import IconLanguage from '../icons/Language';

jest.config.js

@@ -1,10 +1,15 @@
-module.exports = {
+const config = {
+  transform: {
+    '^.+\\.[t|j]sx?$': ['babel-jest', { configFile: './tests/babel.test.config.cjs' }]
+  },
   verbose: true,
   collectCoverage: true,
   coverageReporters: ['text', 'lcov', 'json-summary'],
   coverageDirectory: 'coverage',
-  collectCoverageFrom: ['scripts/**/*.js'],
-  coveragePathIgnorePatterns: ['scripts/compose.js', 'scripts/tools/categorylist.js', 'scripts/tools/tags-color.js'],
-  // To disallow netlify edge function tests from running
-  testMatch: ['**/tests/**/*.test.*', '!**/netlify/**/*.test.*']
+  collectCoverageFrom: ['scripts/**/*.ts'],
+  coveragePathIgnorePatterns: ['scripts/compose.ts', 'scripts/tools/categorylist.ts', 'scripts/tools/tags-color.ts'],
+  testMatch: ['**/tests/**/*.test.*', '!**/netlify/**/*.test.*'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json']
 };
+
+export default config;

next-i18next.config.cjs

@@ -0,0 +1,17 @@
+// The file is required to be named next-i18next.config.cjs so we can use it in next.config.js.
+// https://github.com/i18next/next-i18next/issues/2185#issuecomment-1618307556
+process.env.I18NEXT_DEFAULT_CONFIG_PATH = './next-i18next.config.cjs';
+
+module.exports = {
+  i18n: {
+    locales: ['en', 'de'],
+    defaultLocale: 'en',
+    namespaces: ['landing-page', 'common', 'tools'],
+    defaultNamespace: 'landing-page',
+    react: { useSuspense: false } // this line
+  },
+  langMap: {
+    en: 'English',
+    de: 'Deutsch'
+  }
+};