feat(storybook): add support for basic test-runner configuration

[Djiit]

Added support to generate storybook test-runner target (https://storybook.js.org/docs/react/writing-tests/test-runner).

Related Issue(s)

Fixes #11047

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit ef88db1. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 12 targets

• nx affected --target=e2e --base=5d74e4377549e7c4f52eb1c38486aadc746b0d56 --head=ef88db177c9d4f41aa4faa6d3b0d6dfb7329dc0a --exclude=e2e-storybook,e2e-storybook-angular,e2e-react-native,e2e-detox,e2e-make-angular-cli-faster --parallel=1
• nx affected --target=test --base=5d74e4377549e7c4f52eb1c38486aadc746b0d56 --head=ef88db177c9d4f41aa4faa6d3b0d6dfb7329dc0a --parallel=1
• nx affected --target=build --base=5d74e4377549e7c4f52eb1c38486aadc746b0d56 --head=ef88db177c9d4f41aa4faa6d3b0d6dfb7329dc0a --parallel=3
• nx-cloud record -- yarn depcheck
• nx affected --target=lint --base=5d74e4377549e7c4f52eb1c38486aadc746b0d56 --head=ef88db177c9d4f41aa4faa6d3b0d6dfb7329dc0a --parallel=3
• nx-cloud record -- yarn nx workspace-lint
• nx-cloud record -- yarn check-lock-files
• nx-cloud record -- yarn check-commit
• nx-cloud record -- yarn nx format:check --base=5d74e4377549e7c4f52eb1c38486aadc746b0d56 --head=ef88db177c9d4f41aa4faa6d3b0d6dfb7329dc0a
• nx-cloud record -- yarn check-imports
• nx-cloud record -- yarn documentation
• nx build typedoc-theme

---

Sent with 💌 from NxCloud.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
nx-dev	✅ Ready (Inspect)	Visit Preview	Sep 27, 2022 at 8:43AM (UTC)

[mandarini]

Looks good in general! Once you mark this as ready, I'll add my comments! Thank you so much for this PR @Djiit !! :) :)

[Djiit]

@mandarini Thanks, please add any comments, I'll work on it asap :)

[mandarini]

Hey @Djiit ! Thank you so much for this PR! I made some changes, and I'll merge, if that's ok with you! :)

Changes I made:

1. Changed version of test-runner to the latest, so that it supports Jest 28
2. Added the generator option to the react and the angular packages, too, so that it shows up when someone runs nx g @nrwl/react:storybook-configuration and nx g @nrwl/angular:storybook-configuration, too, and not just when they are invoking the nrwl/storybook package generator. (AMA about this if it's unclear)
3. Rebased your branch with latest master and squashed commits (you had merged master into your branch - we prefer rebase to keep things cleaner)

Other than that, all was perfect!

Thank you so so much for contributing!!!

[mandarini]

Oh, I do have one small request! Can you change the PR description, and describe in a sentence (no more than 10-20 words) what you did? eg. added support to generate test-storybook target using test-runner, and a link to the relevant Storybook docs (test-runner docs or what not)? Thank you so much! This helps us later keep better track of what PRs do, and update any docs!!

[Djiit]

Here you are :) Feel free to ping me if you need more edits. Thanks for all the work!

[gfohl]

@Djiit @mandarini hello thanks for doing this! How would I go about using this and adding test-runner to a project? Thanks!

[mandarini]

Hi @gfohl !

---> https://nx.dev/packages/storybook/generators/configuration#configuretestrunner

[gfohl]

Hi @gfohl !

---> https://nx.dev/packages/storybook/generators/configuration#configuretestrunner

THanks @mandarini, one more quick question, can I add this to an existing lib that has storybook already setup?

[mandarini]

You can try generating storybook configuration for that library again, yes. not sure if it will add the target. if it doesn't, try adding it in a new library, and then copy the task from project.json

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.