feat: Use JSX/TSX in generated spec filenames #25318

mike-plummer · 2022-12-30T19:33:23Z

Closes Scaffolds TS file for TSX project #24495

User facing changelog

Utilize a JSX/TSX file extension when generating a new empty spec file if project contains at least one file with those extensions. This applies only to component testing and is skipped if the project specPattern has been configured to exclude files with those extensions.

Additional details

Original writeup was specific to React which, while likely the largest use case for JSX, is not the only setup that can use JSX. It's also not necessary to use a JSX extension if using React (or other frameworks). For these reasons, I think the only reliable way to determine if we should use a JSX extension for the default spec filename is to check whether there are other existing files using that extension and it would not violate the project's configured specPattern to use it (so we don't generate "disappearing" spec files)

Steps to test

Scaffold a CT project using any framework, keep default specPattern
Open Cypress, use "Create new empty spec" button. Verify suggested filename uses cy.js (not JSX)
Close Cypress, add a JSX file within the project (can be empty)
Reopen Cypress, use "Create new empty spec" button. Verify suggested filename now uses cy.jsx (CHANGED BEHAVIOR)
Close Cypress, add a typescript dependency to the project and rename cypress.config.js to cypress.config.ts
Reopen Cypress, use "Create new empty spec" button. Verify suggested filename now uses cy.tsx (CHANGED BEHAVIOR)
Close Cypress, update the CT specPattern to **/*.cy.js
Reopen Cypress, use "New spec" button. Verify suggested filename now uses cy.ts (not TSX)

How has the user experience changed?

PR Tasks

Have tests been added/updated?
Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
[na] Has a PR for user-facing changes been opened in cypress-documentation?
[na] Have API changes been updated in the type definitions?

cypress · 2022-12-30T20:05:00Z

Test summary

26393 • 0 • 1179 • 0 • 33

Run details


Project	cypress
Status	Passed
Commit	`d5881b7`
Started	Dec 30, 2022 8:18 PM
Ended	Dec 30, 2022 8:35 PM
Duration	16:35 💡
OS	Linux Debian -
Browser	Multiple

View run in Cypress Dashboard ➡️

Flakiness

	create-from-component.cy.ts	1
1	... > runs generated spec
	commands/net_stubbing.cy.ts	4
1	network stubbing > intercepting request > can delay and throttle a StaticResponse
2	network stubbing > intercepting request > can delay and throttle a StaticResponse
3	network stubbing > intercepting request > can delay and throttle a StaticResponse
4	... > stops waiting when an fetch request is canceled
This comment includes only the first 5 flaky tests. See all 33 flaky tests in the Cypress Dashboard.

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

marktnoonan · 2022-12-30T22:05:34Z

packages/data-context/src/sources/ProjectDataSource.ts

+    // If generating a component test then check whether there are JSX/TSX files present in the project.
+    // If project uses JSX then user likely wants to use JSX for their tests as well.
+    // JSX can be used (or not used) with a variety of frameworks depending on user preference/config, so
+    // the only reliable way to determine is whether there are files with JSX extension present


Ultimately it would be nice to put the extension preference for generated tests in the component testing config or something so there is the ability to override this if needed 🤔. But I think this is a good rubric, especially for new people to get what they probably expect.

packages/data-context/src/sources/ProjectDataSource.ts

packages/data-context/test/unit/sources/ProjectDataSource.spec.ts

marktnoonan · 2023-01-03T16:14:51Z

Testing more, but in a Vue project that use jsx for tests, I get a .js file extension:

It's this project: https://github.com/marktnoonan/cy-validators-example/tree/what-component

marktnoonan · 2023-01-03T17:37:06Z

Works well in the React project I tried and in one of our other Vue example projects. Interestingly in the project that's not working as expected, the defaultSpecFileName is generated correctly and works fine for new specs that aren't coming from "Create from Component".

marktnoonan

Took me a few reads of everything to understand that the scope of this doesn't include "Create from Component" - so the Vue problems I reported are actually unrelated, I made a new issue here to track: #25346

ZachJW34 · 2023-01-05T17:42:04Z

packages/data-context/src/sources/ProjectDataSource.ts

+    // the only reliable way to determine is whether there are files with JSX extension present
+    if (this.ctx.coreData.currentTestingType === 'component') {
+      debug('Checking for jsx/tsx files to determine file extension for default spec filename')
+      const projectJsxFiles = await this.ctx.file.getFilesByGlob(this.ctx.currentProject ?? '', '**/*.[jt]sx')


Can this check not be framework based? If it's react -> {fileExtensionToUse}x else ${fileExtensionToUse}?

You don't have to use JSX with React (albeit 99.9% of people do), and you can use JSX with non-React frameworks (like we do with our Vue tests). Doing a "is there already a JSX/TSX file present" seemed like the most reliable option, but I'll defer to the team

I was trying to think through some edge-cases, like a user having some jsx file for storybook but not wanting to have that pollute their generated Cypress tests if they don't plan on using jsx to write their CT tests. I think the proper solution is to have a more deterministic output like what framework they have and then, like @marktnoonan pointed out, having a user config override.

In the end this is just a suggestion for a filename and the user can change it if they want. I'm cool with this if this gets us closer, especially for react devs as that is our majority.

* develop: (45 commits) fix: re-enable CYPRESS_INTERNAL_VITE_DEV development (#25364) fix: add skip domain injection description (#25463) fix: revert CSP header and script-src addition (#25445) chore: Update v8 snapshot cache (#25401) feat: Do not strip CSP headers from HTTPResponse (#24760) fix: keep spaces in formatted output in test runner (#24687) fix: Restrict dependency versions to known supported ranges (#25380) chore: Update v8 snapshot cache (#25370) feat: experimental skip domain injection (#25307) chore: support vite v4 for component testing (#25365) feat: Use JSX/TSX in generated spec filenames (#25318) docs(angular): Properties that are spied upon have to be defined within `componentProperties` instead of on root level. (#25359) chore: remove lint-changed from scripts/docs (#25308) chore: bump to 12.3.0 [skip ci] (#25355) fix: make NODE_ENV "production" for prod builds of launchpad (#25320) fix: .contains() should only return one element at all times (#25250) feat: add currentRetry to Cypress API (#25297) chore: release @cypress/webpack-dev-server-v3.2.2 chore: release create-cypress-tests-v2.0.1 fix: change wording for spec creation (#25271) ...

mike-plummer added 3 commits December 30, 2022 12:40

feat: Use JSX/TSX in generated spec filenames

c20f8f2

Check if jsx extension would violate specPattern

0be2cc9

Fix failing tests

d5881b7

mike-plummer requested review from lmiller1990, marktnoonan and a team December 30, 2022 21:00

marktnoonan reviewed Dec 30, 2022

View reviewed changes

packages/data-context/src/sources/ProjectDataSource.ts Show resolved Hide resolved

mike-plummer requested a review from a team January 3, 2023 14:35

marktnoonan reviewed Jan 3, 2023

View reviewed changes

packages/data-context/test/unit/sources/ProjectDataSource.spec.ts Show resolved Hide resolved

marktnoonan mentioned this pull request Jan 3, 2023

"Create from Vue Component" should create spec with .jsx extension if defaultSpecFileName includes it #25346

Open

marktnoonan approved these changes Jan 3, 2023

View reviewed changes

mike-plummer requested a review from a team January 3, 2023 20:05

ZachJW34 reviewed Jan 5, 2023

View reviewed changes

ZachJW34 approved these changes Jan 5, 2023

View reviewed changes

mike-plummer merged commit acd14a8 into develop Jan 6, 2023

mike-plummer deleted the mikep/24495-use-jsx-in-generated-filename branch January 6, 2023 16:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Use JSX/TSX in generated spec filenames #25318

feat: Use JSX/TSX in generated spec filenames #25318

mike-plummer commented Dec 30, 2022

cypress bot commented Dec 30, 2022 •

edited

Loading

marktnoonan Dec 30, 2022

marktnoonan commented Jan 3, 2023 •

edited

Loading

marktnoonan commented Jan 3, 2023 •

edited

Loading

marktnoonan left a comment

ZachJW34 Jan 5, 2023

mike-plummer Jan 5, 2023

ZachJW34 Jan 5, 2023 •

edited

Loading

feat: Use JSX/TSX in generated spec filenames #25318

feat: Use JSX/TSX in generated spec filenames #25318

Conversation

mike-plummer commented Dec 30, 2022

User facing changelog

Additional details

Steps to test

How has the user experience changed?

PR Tasks

cypress bot commented Dec 30, 2022 • edited Loading

Test summary

Run details

Flakiness

marktnoonan Dec 30, 2022

Choose a reason for hiding this comment

marktnoonan commented Jan 3, 2023 • edited Loading

marktnoonan commented Jan 3, 2023 • edited Loading

marktnoonan left a comment

Choose a reason for hiding this comment

ZachJW34 Jan 5, 2023

Choose a reason for hiding this comment

mike-plummer Jan 5, 2023

Choose a reason for hiding this comment

ZachJW34 Jan 5, 2023 • edited Loading

Choose a reason for hiding this comment

cypress bot commented Dec 30, 2022 •

edited

Loading

marktnoonan commented Jan 3, 2023 •

edited

Loading

marktnoonan commented Jan 3, 2023 •

edited

Loading

ZachJW34 Jan 5, 2023 •

edited

Loading