Storybook pulls my tests

[JesusTheHun]

I'm attempting to migrate from the default builder to vite.
For some reason, storybook shows some error about @testing-library/dom and pretty-format. They should be not there in the first place because those are testing only libraries. I tried to include or exclude them from optimizeDeps without success.
I don't understand why it tries to pull them. Maybe it pulls all the tsconfig files, I don't know. I have 3 tsconfig files at the root of my project, one for dev, one for tests and one for eslint.

Edit : I talked about this issue here : testing-library/dom-testing-library#985

[IanVS]

@JesusTheHun what error are you seeing?

[JesusTheHun]

Uncaught ReferenceError: global is not defined at node_modules/@testing-library/dom/node_modules/pretty-format/build/plugins/AsymmetricMatcher.js (AsymmetricMatcher.js:10)

[IanVS]

@soulsam480 do you have any thoughts on why vite might be trying to process these?

@JesusTheHun, what version of storybook-builder-vite are you using? If not the latest, could you try it out?

[soulsam480]

@JesusTheHun do you have proper types for testing-library and have it as a dev dependency?

[JesusTheHun]

I'm using 0.0.10. The error was also present with 0.0.9.

In my quest I just started to use vite-tsconfig-paths. It looks like solves the issue, but sometimes it shows again. I run into another error, likely related to esbuild and not storybook-vite-builder so maybe this error happens before the one mentioned in this issue does.

testing-library are defined as devDependencies and types are now included in the package.

[soulsam480]

Ah, i got it, may be an issue with custom tsconfig paths. Make sure to add the path in vite.config under resolve.alias. That may solve the issue permanently.

[JesusTheHun]

It's not a custom path. It's at the root of the project. I have 3 different tsconfig, maybe by default it picks them all but with the plugin it only picks one (tsconfig.json), I don't know.

[JesusTheHun]

Right now what seems the closest to work is :

  async viteFinal(config) {
    config.plugins.push(tsconfigPaths());
    config.optimizeDeps.exclude = ['@testing-library/react', '@babel/runtime', 'format-js']
    return config;
  },

[JesusTheHun]

Ok I finally got it working. I was all wrong. Oh boy. I was wrong.

Turns out my main tsconfig.json is used, by default. I still use the plugin so it includes the root for my aliases but that's all it will do for me.
The problem is that in my very tsconfig.json I'm only exluding the usuals :

{
  "include": [
    "src",
    "typings"
  ],
  "exclude": [
    "src/**/*.spec.*",
    "**/node_modules",
    "**/.*/"
  ],
}

Turns out to build my stories I use some utils I created. Those utils were located in a file along with other utils. Those other utils were using and therefore importing @testing-library/react. So I split all my utils into three files : dev-common-utils.tsx for shared utils, stories-utils.tsx for stories-only utils, and finally tests-utils.tsx for jest stuff, including @testing-library. Now, only tests-utils.tsx imports @testing-library.
I also notice my setupTests.ts was included in my tsconfig.json and also carries some imports of @testing-library .

So after splitting my utils I updated my tsconfig.json to the following :

{
  "include": [
    "src",
    "typings"
  ],
  "exclude": [
    "src/**/*.spec.*",
    "src/setupTests.ts",
    "src/utils-dev/tests-utils.tsx",
    "**/node_modules",
    "**/.*/"
  ],
}

My .storybook/main.js viteFinal looks very casual now :

async viteFinal(config) {
    config.plugins.push(tsconfigPaths(), svgr()); // tsconfigPaths() is for aliases, nothing to do with our issue
    return config;
  },

I hope I gave enough details so people struggling with the same issue can fix it more quickly than I did :)

[IanVS]

Thanks for the thorough followup, @JesusTheHun!