Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BabelConfig with rootMode: "upward" not loading babel config files #1341

Closed
arvigeus opened this issue Jan 9, 2020 · 13 comments · Fixed by #1370
Closed

BabelConfig with rootMode: "upward" not loading babel config files #1341

arvigeus opened this issue Jan 9, 2020 · 13 comments · Fixed by #1370
Labels

Comments

@arvigeus
Copy link

arvigeus commented Jan 9, 2020

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

@arvigeus arvigeus changed the title BabelConfig with rootMode: "upward" not loading babel files config BabelConfig with rootMode: "upward" not loading babel config files Jan 9, 2020
@ahnpnl
Copy link
Collaborator

ahnpnl commented Jan 9, 2020

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
Copy link
Collaborator

ahnpnl commented Jan 9, 2020

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

@arvigeus
Copy link
Author

arvigeus commented Jan 9, 2020

Manually passing means copy / paste 😃

@ahnpnl
Copy link
Collaborator

ahnpnl commented Jan 9, 2020

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

@ahnpnl ahnpnl added the 🐛 Bug label Jan 9, 2020
@arvigeus
Copy link
Author

arvigeus commented Jan 9, 2020

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
Copy link
Collaborator

ahnpnl commented Jan 9, 2020

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
Copy link
Author

arvigeus commented Jan 9, 2020

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
Copy link
Collaborator

ahnpnl commented Jan 12, 2020

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
Copy link
Owner

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

@ahnpnl
Copy link
Collaborator

ahnpnl commented Jan 13, 2020

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
Copy link
Author

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
Copy link
Collaborator

ahnpnl commented Jan 13, 2020

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

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
Copy link
Collaborator

ahnpnl commented Jan 31, 2020

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants