Build: Upgrade Jest to version 28

[Marklb]

Issue:

Angular tests have been excluded and they seem to be mostly fixed with Jest 28, so this is to try upgrading to Jest 28.

What I did

This updates the monorepo to use jest 28. Previously, we ran all tests in the jsdom environment, but the newer jest is more picky about it, and calls like setImmediate started to fail after the upgrade.

So now we test some packages with a node environment and some with a jsdom environment. It does this by splitting the original jest config into two separate configs, one for browser environments, and one for node environments, and creating jest.config.js files in the root of each package. It's a little tedious, but it gives us greater control over how jest runs for each package, not only the environment, but other config as well.

This also starts fixing Angular tests that have got behind while excluded, though we're not yet able to turn them back on just yet.

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[Marklb]

I got most of the Angular test building now. The ones that I originally had building are now failing, but I think they will still be passing when that build issue is fixed. There are still Angular tests that need to be updated for v7 changes, but they seem to be building, at least.

I also went through the other projects and fixed some of the issues I recognized for Jest 28 changes.

As for configuration issues, Jest's transformIgnorePatterns seems to have some inconsistencies in it's matching. Unless I used a single string for the matching, it seemed to not work for all the patterns. What I have seems to be working for the most part, but I don't know if the single string will cover everything if it is needed for some issues I didn't get fixed.

[IanVS]

OK, I have tests almost passing locally. There's one problem I can't figure out, in storyshots, that I need some help on. More on that later.

The main change I made here is to break out the jest config into two separate files, jest.config.browser and jest.config.node, both extending from a base config. This is because we have some packages that are designed to run in node, and some in the browser, and previously we were running all our jest tests with the jsdom environment. Well, it seems that jsdom has gotten more accurate now, so node.js APIs that we try to call in our node packages started throwing errors.

To accomplish this, I needed to start using a multi-project based approach, rather than multi-root. Each project needs to have its own jest config, and these extend from either the browser config or the node config. This also has two nice side-benefits:

• We can configure jest differently for each project (for example, adding the enzyme-to-json serializer only for the storyshots addon, since that's the only place it's used.
• We can give each project a name, which appears in the test when it's running. (not a big deal, but kind of nice.)

Here's what the project names look like:

I'm not sure if I did a perfect job of breaking up node/browser packages, but the tests are passing so 🤷. We can also specify a different environment on a per-file basis, as I did in code/lib/api/src/tests/shortcut.test.js.

OK so here's what I still need help with. For some reason, a new snapshot is being created by the storyshots test, and it has the wrong path. It seems to be due to storybook.raw() returning a filename that is relative, for the CSF story (but not the storiesOf story). This is now being interpreted from the addons/storyshots directory rather than the project root. Maybe @tmeasday has some idea of why this is happening?

And, I had to re-ignore the angular tests, because they were failing (and taking forever to run). @Marklb maybe you can take a look, by removing the exclusion in the projects glob in jest.config.js?

[tmeasday]

@IanVS

Maybe @tmeasday has some idea of why this is happening?

I guess CSF files get a fileName that is a relative path (the same as the entry.importPath). This is assumed to be relative to the cwd where the webpack process runs from. Possibly that is interpreted by SS to be the Jest project root?

I'm not 100% sure what the fileName of a storiesOf file is, it's based on the module.id, but we don't actually use it directly (i.e import it) so it's not something I've looked at a lot. It could be absolute in Jest for sure.

[Marklb]

I am probably going to exclude https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts, because I think I can get the rest of Angular's tests working, but I am wondering if anyone has any ideas for how I can maybe solve the following issue blocking me on those tests.

Here (https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/server/angular-cli-webpack-13.x.x.js#L27) we call generateI18nBrowserWebpackConfigFromContext and internally it is calling the same loadEsmModule function that we have defined here (https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/server/framework-preset-angular-ivy.ts#L21). When it attempts to import '@angular/core', which is published in ESM format only, a Segmentation fault is thrown. Everything I could find on the problem seems to be projects changing their code to avoid calling loadEsmModule during tests. We can't exactly change the code, because the function is in a node_modules package.

I started looking for a way to alter that line, using a custom transformer, but the errors looked like the dynamically imported module didn't go through the transformers. I may be able to alter it another way, so that it does transform the code correctly. Even if I can get that code to work by altering that line with a transformer, is it worth going for that approach or would it be better to mock that function and just make sure the rest of our code is doing what is expected?

[IanVS]

I'm so super confused by this. Everything passes locally, renderer/vue3 fails in the github actions CI jobs but passes in CircleCI, and renderer/vue fails in CircleCI, but passes in Github. And everything was working just fine before I pulled in the latest next with the windows fixes. Ahhhhhhh!

[kasperpeulen]

Amazing work!!

[IanVS]

Phew, got the ✅ from CI finally. I have a few approvals from folks, and the longer this sits the more I need to rebase it, so I'm going to merge, and start working on the jest 29 upgrade as well as a few other cleanups. Thanks for the reviews, everyone, and thanks @Marklb for kicking this off. Let's try to get angular tests passing and turned on in a separate PR.