Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: create from React component #25168

merged 16 commits into from Dec 19, 2022


Copy link

@astone123 astone123 commented Dec 15, 2022

User facing changelog

Users working in React projects can now generate a basic Component Testing spec file from the components that exist in their project.

Note: this was reviewed in several PRs - this PR does not introduce new code.

Additional details

This feature will improve the onboarding experience for users creating Component Testing specs for the first time (or not for the first time) by reducing friction and allowing them to get a component mounted inside of a test in a matter of seconds without reading any documentation or manually creating a new spec file.

Users will still be able to create empty specs from the UI as well.

Steps to test

  1. Open Component Testing with a project that uses React (CRA, Next, etc.)
  2. Click the "New Spec" button in the top-right corner of the specs list
  3. Select "Create from component" card
  4. See a list of the files in your project that may contain React components
  5. Expand each row and verify that any React components that are exported from that file are listed in the expanded list
  6. Click one of the components and verify that a new spec is created that correctly imports and mounts the component you selected (the test may not pass if the component has required props or requires providers in the component tree)
  7. Verify that the first time you run the spec there is a green banner with a link to the Styling Components documentation

How has the user experience changed?

PR Tasks

astone123 and others added 13 commits December 5, 2022 10:25
Co-authored-by: Ryan Manuel <>
Co-authored-by: Lachlan Miller <>
Co-authored-by: astone123 <>
* feat: WIP server logic for create from React component

* feat: add more tests; error handling

* feat: WIP create from React UI

* feat: PR feedback [run CI]

* feat: try committing snapshot cache changes [run ci]

* feat: try re-generating snapshot [run ci]

* fix build

* regenerate cache on darwin

* update caches

* Revert "feat: try re-generating snapshot [run ci]"

This reverts commit d763e1f.

* fix typing error

* types

* fix test

* chore: try using react-docgen@6.0.0-alpha.3

* update test

* regen linux snapshot

* update snapshots for darwin

* re-gen linux snapshot

* yarn install

* update snapshots

* update snapshot metadata

* update snapshots due to babel deps changing slightly

* make react docgen a dep

* update tests

* revert

* snapshots again??

* revert

* update

* update

* try change snapshot

* change snap

* update snap

* feat: remove unnecessary ts-ignore

* feat: add more test cases

* feat: create CodegenActions; other minor refactors

* feat: continue UI work

* feat: ignore config and Cypress-related files

* feat: PR feedback

* update Vue component link

* merge in default export work

* consolidate graphql queries

* other misc feedback

* use network-only policy to fetch files; include cypress/ dir for code gen candidates; fix type error

* add basic e2e test

* fix app integration tests

* refactor and fix app component and webpack dev server tests

* add error state; fix unit tests [skip ci]

* simplify generator show logic [skip ci]

* more testing

* fix types

* style updates [skip ci]

* fix error state [skip ci]

* fix list padding [skip ci]

* use slots (#25079)

* add more tests; fix unit tests

* fix types

* fix test describe

* add percy snapshots for new list

* update trouble rendering banner link [skip ci]

* use collapsible component

* use button for component list items

* fix tests

* build binaries

* revert changes to circle config

* remove eslintignore and extra loading div [skip ci] because we know it will fail

* revert changes to framework glob patterns [skip ci]

Co-authored-by: Ryan Manuel <>
Co-authored-by: Lachlan Miller <>
@astone123 astone123 requested a review from a team December 15, 2022 02:25
@astone123 astone123 self-assigned this Dec 15, 2022
Copy link

cypress-bot bot commented Dec 15, 2022

Thanks for taking the time to open a PR!

@astone123 astone123 changed the title feat: Create from React component feat: create from React component Dec 15, 2022
Copy link

@lmiller1990 lmiller1990 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code is good, reviewed this bit by bit as it merged into the feature branch.

I'll give the binaries a test.

Any additional PR needed for

  1. docs
  2. blog post?

Before this goes out?

@lmiller1990 lmiller1990 requested a review from a team December 15, 2022 02:47
Copy link

cypress bot commented Dec 15, 2022

Test summary

4240 0 861 0Flakiness 1

Run details

Project cypress
Status Passed
Commit 13a2007
Started Dec 19, 2022 1:22 AM
Ended Dec 19, 2022 1:36 AM
Duration 14:47 💡
OS Linux Debian -
Browser WebKit 16

View run in Cypress Dashboard ➡️


cypress/e2e/commands/ Flakiness
1 ... > with `resourceType` > can match a proxied image request by resourceType

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

Copy link
Contributor Author

@lmiller1990 the docs PR is linked in the PR checklist. It's in draft for now - have a couple more things to add to it including updated screenshots. Blog post I'm not sure about, I'll talk to the marketing about it

Copy link

I tried the binary out on my systems (mac, linux) and it's working as expected. 🎉

Copy link

@ZachJW34 ZachJW34 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on Windows and worked like a charm, LGTM!!!

@rockindahizzy rockindahizzy removed their request for review December 16, 2022 16:09
@lmiller1990 lmiller1990 merged commit 166b694 into develop Dec 19, 2022
112 of 113 checks passed
@lmiller1990 lmiller1990 deleted the feature/create-from-react-component branch December 19, 2022 02:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

None yet

4 participants