Storybook pulls my tests

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 : https://github.com/testing-library/dom-testing-library/issues/985

[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 😃

[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;
  },