Dynamically set i18n resources for Storybook and tests (#68)

## Changes

- Remove the `resources` option from Storybook's i18next initialization.
We're utilizing the `i18next-http-backend` package for loading locales
in Storybook via HTTP requests, so manually setting them doesn't appear
to be required for it to render the strings.
- Update Jest's i18next initialization to dynamically set `resources`
based on the file structure. This removes the need for updating the Jest
setup file every time a new language file is created.
- Fix the `test-update` script

Author: sawyerh

app/.storybook/i18next.js

@@ -1,4 +1,4 @@
-// Configure i18next for storybook addon storybook-react-i18next
+// Configure i18next for Storybook
 // See https://storybook.js.org/addons/storybook-react-i18next
 import i18next from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
@@ -7,27 +7,10 @@ import { initReactI18next } from "react-i18next";
 
 import i18nConfig from "../next-i18next.config";
 
-const { i18n, ...i18nextOptions } = i18nConfig;
-const ns = ["common"];
-
-const resources = ns.reduce((acc, n) => {
-  i18n.locales.forEach((lng) => {
-    if (!acc[lng]) acc[lng] = {};
-    acc[lng] = {
-      ...acc[lng],
-      [n]: require(`../public/locales/${lng}/${n}.json`),
-    };
-  });
-  return acc;
-}, {});
-
 i18next
   .use(initReactI18next)
   .use(LanguageDetector)
   .use(Backend)
-  .init({
-    ...i18nextOptions,
-    resources,
-  });
+  .init(i18nConfig);
 
 export default i18next;

app/package.json

@@ -14,7 +14,7 @@
     "storybook": "start-storybook -p 6006",
     "storybook-build": "build-storybook",
     "test": "jest --ci --coverage",
-    "test-update": "jest --update-snapshots",
+    "test-update": "jest --update-snapshot",
     "test-watch": "jest --watch",
     "ts:check": "tsc --noEmit"
   },

app/tests/jest-i18n.ts

@@ -1,21 +1,52 @@
-import i18n from "i18next";
+/**
+ * @file Setup internationalization for tests so snapshots and queries reference the correct translations
+ */
+import fs from "fs";
+import i18n, { InitOptions } from "i18next";
+import path from "path";
 import { initReactI18next } from "react-i18next";
 
 // @ts-expect-error - Config file has to be .js
 import i18nConfig from "../next-i18next.config";
-import enCommon from "../public/locales/en/common.json";
-import esCommon from "../public/locales/es/common.json";
-
-// Setup internationalization for tests so snapshots and queries reference the correct translations
-i18n.use(initReactI18next).init({
-  ...i18nConfig,
-  resources: {
-    en: {
-      common: enCommon,
-    },
-    es: { common: esCommon },
-  },
-});
+
+const locales = i18nConfig.i18n.locales;
+
+/**
+ * Load all of the locales into a single object. A server isn't running for our tests,
+ * so we can't load these static assets using HTTP requests like in Storybook.
+ * https://www.i18next.com/how-to/add-or-load-translations
+ */
+export const getResources = () => {
+  const resources: InitOptions["resources"] = {};
+
+  locales.forEach((locale: string) => {
+    resources[locale] = {};
+
+    const namespaces = fs
+      .readdirSync(path.resolve(__dirname, `../public/locales/${locale}`))
+      .map((file) => file.replace(/\.json$/, ""));
+
+    namespaces.forEach((namespace) => {
+      const namespacePath = `../public/locales/${locale}/${namespace}`;
+      // eslint-disable-next-line
+      resources[locale][namespace] = require(namespacePath);
+    });
+
+    return resources;
+  });
+
+  return resources;
+};
+
+i18n
+  .use(initReactI18next)
+  .init({
+    ...i18nConfig,
+    resources: getResources(),
+  })
+  .catch((err) => {
+    throw err;
+  });
 
 // Export i18n so tests can manually set the language with:
 // i18n.changeLanguage('es')