Storybook: Console noise re: “Loading custom .babelrc”

[brandondurham]

I’m using Jest’s snapshot testing feature with Storybook. After incorporating I started to notice a lot of console noise popping when running my tests. Looks like this:

 PASS  app/components/ModalConfirmation/tests/index.test.js (265 MB heap size)
  ● Console

    console.info node_modules/@storybook/react/dist/server/babel_config.js:73
      => Loading custom .babelrc

 PASS  app/components/Button/tests/index.test.js (301 MB heap size)
  ● Console

    console.info node_modules/@storybook/react/dist/server/babel_config.js:73
      => Loading custom .babelrc

 PASS  app/components/EntryWaffle/tests/index.test.js (307 MB heap size)
  ● Console

    console.info node_modules/@storybook/react/dist/server/babel_config.js:73
      => Loading custom .babelrc

 PASS  app/components/TertiaryMenu/tests/index.test.js (307 MB heap size)
  ● Console

    console.info node_modules/@storybook/react/dist/server/babel_config.js:73
      => Loading custom .babelrc

 PASS  app/components/Hero/tests/index.test.js (303 MB heap size)
  ● Console

    console.info node_modules/@storybook/react/dist/server/babel_config.js:73
      => Loading custom .babelrc

Any idea where this is coming from and how to silence?

Thanks so much.

[danielduan]

That comes from our script that loads the webpack file and babel file. I don't see an obvious way to silence that line currently.

[merlinpatt]

It comes from this line.

Why is it that this needs to be there? I feel like if you're going the custom route, you know enough to not need to be told a custom file is loading.

[danielduan]

It seems obvious to us but it's helpful for beginners to debug their config and see if their .babelrc file has been loaded.

I suggest you guys take a look at the storyshots addon and see if that helps you. It will streamline the jest tests for you.

[merlinpatt]

Could a flag be added that would turn it off? Maybe from the command line? Or, and I don't if babel allows for this, but a custom property in the .babelrc file?

[danielduan]

You are more than welcome to dig into the codebase and send us a PR if you find a good way to do this.

[merlinpatt]

I hacked around a bit and came up with this solution

if (! config.env || ! config.env.storybookSkipPrintLoading) {
  logger.info('=> Loading custom .babelrc');
}

And then in your babelrc, you add

"env": {
  "storybookSkipPrintLoading": true
}

Would this be an acceptable solution?

[danielduan]

I don't know how I feel about that. It feels more like a one off hack for this specific jest config rather than an overall fix for too much console noise.

I think ideally we would have a way to configure the entire build process to be silent because there are other undesired webpack outputs as well when building with tools like Jenkins.

I'd love to hear from some other team members as well.

[Hypnosphi]

Honestly, I'm intrigued why a jest test launches storybook build

[danielduan]

It's not the build. I think it's because they might be importing the babel config from that file and getting all the console stuff with it.

[TomPridham]

could we have that console log be behind a debug flag or something? it feels like something you should opt into if you need it, not something that you should have to opt out of.

[merlinpatt]

I agree with Tom. Is there some way that this output can be hidden behind a flag of some kind?

[merlinpatt]

I would still like to see something happened around this. I'm happy to make the change myself. I just want to do it in an approved way

[Hypnosphi]

@merlinpatt You can start with opening a PR, it will be reviewed anyway. Given that we're approaching 4.0 release, it would be OK to change defaults. It could be something like --verbose CLI option

[ndelangen]

I think this is fixed in 4.0.0 (alpha)