@nx/react/plugins/storybook seems to be incompatible with auto generated cypress configuration

rafal2228 commented 11 months ago

Current Behavior

Auto generated storybook configuration with cypress setup is not compatible with @nx/react/plugins/storybook plugin. After trying to run tests in related e2e project, the storybook fails to start as it incorrectly treats the root of e2e package as directory where the tsconfig.storybook.js file should be - while in practice it is in the library folder.

Expected Behavior

The autogenerated e2e target of cypress project should work

GitHub Repo

https://github.com/rafal2228/storybook-cypress-integration-issue

Steps to Reproduce

The repro repo was created with:

npx create-nx-workspace@latest
npm i -D @nx/webpack@16.8.1 @nx/react@16.8.1 @nx/storybook@16.8.1
npx nx generate @nx/react:library
npx nx generate @nx/storybook:configuration --uiFramework=@storybook/react-webpack5 --configureCypress=true
npx nx run ui-e2e:e2e

Checkout provided repo
Install dependencies
Run npx nx run ui-e2e:e2e

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 18.16.0
   OS     : linux-x64
   npm    : 9.5.1

   nx                 : 16.8.1
   @nx/js             : 16.8.1
   @nx/jest           : 16.8.1
   @nx/linter         : 16.8.1
   @nx/workspace      : 16.8.1
   @nx/cypress        : 16.8.1
   @nx/devkit         : 16.8.1
   @nx/eslint-plugin  : 16.8.1
   @nx/react          : 16.8.1
   @nx/storybook      : 16.8.1
   @nrwl/tao          : 16.8.1
   @nx/web            : 16.8.1
   @nx/webpack        : 16.8.1
   typescript         : 5.1.6

Failure Logs

*  Executing task: npx nx run ui-e2e:e2e 

> nx run ui-e2e:e2e

info => Starting manager..
WARN No story files found for the specified pattern: ui/src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)
info Addon-docs: using MDX2
=> Loading Nx React Storybook Addon from "@nx/react/plugins/storybook"
 >  NX   ENOENT: no such file or directory, stat 'ui-e2e/tsconfig.storybook.json'
   Pass --verbose to see the stacktrace.

Package Manager Version

9.5.1

Operating System

[ ] macOS
[X] Linux
[ ] Windows
[ ] Other (Please specify)

Additional Information

No response

mandarini commented 10 months ago

Thanks for the bug report @rafal2228 !

I created a PR that will find the correct tsconfig.json that's needed. However, I have to note here that there is some wonkiness regarding libs and @storybook/react-webpack5. If you use @storybook/react-vite for your library you will not have an issue. Similarly, when my PR gets merged, and you are on a React application that uses @storybook/react-webpack5, you will again not have an issue.

Also, we are now suggesting that you use Interaction tests instead of Cypress to test your Storybooks and your components: https://nx.dev/recipes/storybook/storybook-interaction-tests, you should check this out if you're interested! :D

github-actions[bot] commented 9 months ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx