Fixing Jest import failure

If you are reading this post, you likely encounter this error:

> 4 | import someConfig from '../config/SomeConfigs.json' with { type: 'json' }; 
    |                                                                ^
  5 |
  6 | /**

Add @babel/plugin-syntax-import-attributes (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-import-attributes) to the 'plugins' section of your Babel config to enable parsing.

If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:

The issue in my case was to create a babel configuration file for Jest to use when transpiling the different source files.

babel.config.js (or babel.config.cjs)

module.exports = api => {
    const isTest = api.env('test');

      return {
        plugins: [
          "@babel/plugin-syntax-import-attributes",
        ],
      }

  };

Source

I took inspiration from this blog post which described issues with React dependencies in Jest unit tests.

This complete example uses the conditional configuration suggested in Jest documentation.

module.exports = api => {
  const isTest = api.env('test');
  // You can use isTest to determine what presets and plugins to use.

  return {
    // ...
  };
};