Ts-jest: BabelConfig with rootMode: "upward" not loading babel config files

[arvigeus]

A simple monorepo with the following config:

// package/ui/jest.config.js

{
  globals: {
    "ts-jest": {
      babelConfig: {
        rootMode: "upward"
    }
  },
  preset: "ts-jest",
  transform: {
    "^.+\\.jsx?$": ["babel-jest", { rootMode: "upward" }]
  }
}

When I run yarn test it works as expected. When I run yarn lerna run test, ts-jest fails to load babel configs. If I use babel-jest instead of ts-jest, it works fine. The only way to make it work is to manually pass the entire babel config to globals[ts-jest].babelConfig.

Maybe something like globals[ts-jest].babelConfig.babelrc: true would be nice in such case to allow loading configs. It didn't worked with globals[ts-jest].babelConfig: true

Minimal repo

https://github.com/arvigeus/monotest

[ahnpnl]

Interesting, I never use this rootMode of Babel so I wasn’t aware that it didn’t work for ts-jest. Thanks for submitting the issue 👍

[ahnpnl]

Manually passing the config means you use require or absolute path to your Babel config ?

[arvigeus]

Manually passing means copy / paste 😃

[ahnpnl]

You can use require() or string absolute path to save your time :) it is described in the documentation.

[arvigeus]

Yeah, but I want this to be extracted as a base config, so it would not work for multiple packages (with their own babelrc configs)

[ahnpnl]

Btw, do you have the log file of ts-jest after running tests ? I’m interested to see where ts-jest locates your root babelrc.

Is it your issue about using rootMode: ‘upward’ and root config babelrc isn’t loaded ? (Correct me if I’m wrong)

[arvigeus]

Logs: https://pastebin.com/SfS43ddg

It is supposed to load .babelrc file from package, then merge it with top level babel.config.json. It works with the js file that is being processed with babel-jest.

[ahnpnl]

what I can see from the log is actually babelrc wasn't loaded but only root babel config is loaded (you can search for "plugins" in your log).

So the main issue here is ts-jest doesn't know about your babelrc in subpackages because ts-jest babel config is on global level. So when you specify ts-jest config to use babel, it only searches in the root folder (by default) or it searches based on specifying string path or use require. ts-jest doesn't search for the whole project to find other babel config. Therefore it throws the error like you saw.

So temporarily workaround is you copy the content of babel config in your subpackages and paste to ts-jest babel config, for example:

globals: {
    'ts-jest': {
      babelConfig: {
        'plugins': [
          [
            'macros',
            {
              'styledComponents': {
                'pure': true,
              },
            },
          ],
        ],
        rootMode: 'upward',
      },
    },
  },

The question here is how does ts-jest know when to search for the whole project to find other babel configs. The idea of providing a subpackage babel config is the easiest implementation, but is it a good way to go ?

What do you think @kulshekhar ? I think perhaps for loading babel config, if user specifies rootMode: 'upward' we can somehow look for babel config in the whole project based on ? But this will create a question is how to find the config in subpackages quickly, can we rely on babelrcRoots in the root babel config ?

[kulshekhar]

Given that this is a one time setup, isn't the suggested workaround sufficient?

[ahnpnl]

I think the bug might be about the way ts-jest searches for babel config. I checked the logic and in the case of rootMode: ‘upward’, ts-jest skips finding babelrc in the current folder level, only takes the line config and then go up to root to get Babel config root.

My suggestion is if user defines rootMode: ‘upward’, we should try to find Babel config on the current level first then go up to root to merge with Babel root config. That’s also the way I understood by inspecting how Babel config works.

[arvigeus]

Isn't it possible to delegate this to babel-jest when it comes to it? Otherwise you are reimplementing logic. I am thinking about some general solution, not just my problem in particular.

[ahnpnl]

Indeed I like that approach. However I'm not sure how to do it. So how ts-jest deals with babel config is:

• Retrieve babel config via babelConfig of ts-jest option.
• Create babel-jest transformer with the config retrieved above.

So I can understand that ts-jest needs to retrieve babel config before invoking creating transformer API of jest. Therefore I'm not sure the approach of delegating to babel-jest is possible.

[ahnpnl]

@arvigeus , I found out the main cause of your issue. It is caused by invoking babel to load config here. So if ts-jest don't invoke babel to load config and just pass plain config object (gathering from either inline or any babel files ts-jest can gather) to babel-jest to use in createTransformer, the issue will be solved and it is like your suggestion why not let babel-jest handles loading babel. I have made a question to jest team to confirm this first.