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

Author: mike-plummer

packages/app/cypress/e2e/specs.cy.ts

@@ -575,7 +575,7 @@ describe('App: Specs', () => {
 
         it('shows success modal when template spec is created', () => {
           cy.get('@CreateEmptySpecDialog').within(() => {
-            cy.findByLabelText('Enter a relative path...').invoke('val').should('eq', getPathForPlatform('cypress/component/ComponentName.cy.ts'))
+            cy.findByLabelText('Enter a relative path...').invoke('val').should('eq', getPathForPlatform('cypress/component/ComponentName.cy.tsx'))
 
             cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js')
 
@@ -603,7 +603,7 @@ describe('App: Specs', () => {
 
         it('navigates to spec runner when selected', () => {
           cy.get('@CreateEmptySpecDialog').within(() => {
-            cy.findByLabelText('Enter a relative path...').invoke('val').should('eq', getPathForPlatform('cypress/component/ComponentName.cy.ts'))
+            cy.findByLabelText('Enter a relative path...').invoke('val').should('eq', getPathForPlatform('cypress/component/ComponentName.cy.tsx'))
 
             cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js')
 
@@ -623,7 +623,7 @@ describe('App: Specs', () => {
 
         it('displays alert with docs link on new spec', () => {
           cy.get('@CreateEmptySpecDialog').within(() => {
-            cy.findByLabelText('Enter a relative path...').invoke('val').should('eq', getPathForPlatform('cypress/component/ComponentName.cy.ts'))
+            cy.findByLabelText('Enter a relative path...').invoke('val').should('eq', getPathForPlatform('cypress/component/ComponentName.cy.tsx'))
 
             cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js')
 
@@ -756,7 +756,7 @@ describe('App: Specs', () => {
         cy.findByRole('dialog', {
           name: 'Enter the path for your new spec',
         }).within(() => {
-          cy.findByLabelText('Enter a relative path...').invoke('val').should('eq', getPathForPlatform('src/specs-folder/ComponentName.js'))
+          cy.findByLabelText('Enter a relative path...').invoke('val').should('eq', getPathForPlatform('src/specs-folder/ComponentName.jsx'))
 
           cy.findByRole('button', { name: 'Create spec' }).click()
         })

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

@@ -419,11 +419,42 @@ export class ProjectDataSource {
 
   async defaultSpecFileName (): Promise<string> {
     const { specPattern = [] } = await this.ctx.project.specPatterns()
+    let fileExtensionToUse: FileExtension = this.ctx.lifecycleManager.fileExtensionToUse
+
+    // 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
+    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')
+
+      if (projectJsxFiles.length > 0) {
+        debug('At least one jsx/tsx file found in project, utilizing for default spec filename')
+        const generatedSpecFileName = await getDefaultSpecFileName({
+          currentProject: this.ctx.currentProject,
+          testingType: this.ctx.coreData.currentTestingType,
+          fileExtensionToUse: `${fileExtensionToUse}x`,
+          specs: this.specs,
+          specPattern,
+        })
+
+        // There is the possibility that a specPattern has been configured to exclude spec files using jsx/tsx extensions
+        // In this case, fallback to default logic which will generate js/ts filename
+        if (await this.matchesSpecPattern(generatedSpecFileName)) {
+          return generatedSpecFileName
+        }
+
+        debug('jsx/tsx extension would violate configured specPattern, utilizing default spec filename')
+      } else {
+        debug('No jsx/tsx files found, utilizing default spec filename')
+      }
+    }
 
     return getDefaultSpecFileName({
       currentProject: this.ctx.currentProject,
       testingType: this.ctx.coreData.currentTestingType,
-      fileExtensionToUse: this.ctx.lifecycleManager.fileExtensionToUse,
+      fileExtensionToUse,
       specs: this.specs,
       specPattern,
     })

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

@@ -818,5 +818,29 @@ describe('ProjectDataSource', () => {
 
       expect(defaultSpecFileName).to.equal('cypress/component-tests/foo/ComponentName.spec.js')
     })
+
+    describe('jsx/tsx handling', () => {
+      beforeEach(async () => {
+        ctx.coreData.currentTestingType = 'component'
+        await ctx.actions.file.writeFileInProject(path.join('src', 'components', 'App.jsx'), '// foo')
+      })
+
+      it('yields correct jsx extension if there are jsx files and specPattern allows', async () => {
+        sinon.stub(ctx.project, 'specPatterns').resolves({ specPattern: [defaultSpecPattern.component] })
+
+        const defaultSpecFileName = await ctx.project.defaultSpecFileName()
+
+        expect(defaultSpecFileName).to.equal('cypress/component/ComponentName.cy.jsx', defaultSpecFileName)
+      })
+
+      it('yields non-jsx extension if there are jsx files but specPattern disallows', async () => {
+        sinon.stub(ctx.project, 'specPatterns').resolves({ specPattern: ['cypress/component/*.cy.js'] })
+
+        const defaultSpecFileName = await ctx.project.defaultSpecFileName()
+
+        // specPattern does not allow for jsx, so generated spec name should not use jsx extension
+        expect(defaultSpecFileName).to.equal('cypress/component/ComponentName.cy.js', defaultSpecFileName)
+      })
+    })
   })
 })