json5 is not loaded in tests

[kerrickstaley]

It looks like when you try to do

import en from './i18n/en.json5';

inside a test, the variable en is populated with the literal string value "en.json5" instead of the module's contents.

I added two tests in this commit that demonstrate this issue.

[itsdevdom]

Yeah ... CRA uses Jest to run tests, which has its own setup and is not using the Webpack pipeline.

My best guess is that Jest would need a custom transformer. Perhaps something like https://github.com/RyosukeCla/json5-jest?

[kerrickstaley]

I tried adding json5-jest and configuring it in this commit, but I'm still getting the same error:

    Expected: {"APP.TITLE": "My cool application"}
    Received: "en.json5"

      12 |
      13 | test('json5 file is loaded', () => {
    > 14 |   expect(en).toEqual({'APP.TITLE': 'My cool application'});
         |              ^
      15 | });

[itsdevdom]

May be related to the order of Jest transformers ... which is a bit messy, cause they are defined as an object, and key order within objects is always a bit tricky.

What happens if you insert the JSON5 transformer into the beginning of the transform object? For example:

jest: (config) => {
  config.transform = {
    '^.+\\.json5?$': 'json5-jest', // Explicitely use as first transformer
    ...config.transform,
  };
  return config;
}