fix(react): prevent generating empty props since setting strict in ts…

…config is not compatible with it (#26428)

This PR updates the React components so that interface for props is not
generated. Some components don't have them, and users know how to add
them if needed. This makes the generated component pass type checking if
`strict: true` is used in tsconfig.

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

packages/next/src/generators/page/page.spec.ts

@@ -56,7 +56,6 @@ describe('component', () => {
       const content = tree
         .read('my-app/pages/posts/[dynamic]/index.tsx')
         .toString();
-      expect(content).toMatch(/DynamicProps/);
     });
   });
 
@@ -97,7 +96,6 @@ describe('component', () => {
       const content = tree
         .read(`${appRouterProjectName}/app/posts/[dynamic]/page.tsx`)
         .toString();
-      expect(content).toMatch(/DynamicProps/);
     });
   });
 });

packages/react/src/generators/component-test/__snapshots__/component-test.spec.ts.snap

@@ -64,19 +64,12 @@ describe(AnotherCmp2.name, () => {
 
 exports[`componentTestGenerator multiple components per file should handle no props 1`] = `
 "import * as React from 'react'
-import SomeLib, { SomeLibProps, AnotherCmp } from './some-lib'
+import SomeLib, { AnotherCmp } from './some-lib'
 
 
 describe(SomeLib.name, () => {
-  let props: SomeLibProps;
-
-  beforeEach(() => {
-    props = {
-    }
-  })
-
   it('renders', () => {
-    cy.mount(<SomeLib {...props}/>)
+    cy.mount(<SomeLib />)
   })
 })
 
@@ -91,19 +84,12 @@ describe(AnotherCmp.name, () => {
 
 exports[`componentTestGenerator multiple components per file should handle props 1`] = `
 "import * as React from 'react'
-import SomeLib, { SomeLibProps, AnotherCmpProps, AnotherCmp } from './some-lib'
+import SomeLib, { AnotherCmpProps, AnotherCmp } from './some-lib'
 
 
 describe(SomeLib.name, () => {
-  let props: SomeLibProps;
-
-  beforeEach(() => {
-    props = {
-    }
-  })
-
   it('renders', () => {
-    cy.mount(<SomeLib {...props}/>)
+    cy.mount(<SomeLib />)
   })
 })
 
@@ -179,19 +165,12 @@ describe(AnotherCmp.name, () => {
 
 exports[`componentTestGenerator single component per file should handle no props 1`] = `
 "import * as React from 'react'
-import SomeLib, { SomeLibProps } from './some-lib'
+import SomeLib from './some-lib'
 
 
 describe(SomeLib.name, () => {
-  let props: SomeLibProps;
-
-  beforeEach(() => {
-    props = {
-    }
-  })
-
   it('renders', () => {
-    cy.mount(<SomeLib {...props}/>)
+    cy.mount(<SomeLib />)
   })
 })
 

packages/react/src/generators/component/files/__fileName__.tsx__tmpl__

@@ -23,18 +23,14 @@ import { Route, Link } from 'react-router-dom';
     var extras = '';
 } %>
 
-/* eslint-disable-next-line */
-export interface <%= className %>Props {
-}
-
 <% if (styledModule && styledModule !== 'styled-jsx') { %>
 const Styled<%= className %> = styled.div`
   color: pink;
 `;
 <% }%>
 <% if(!isNextPage) { %>
   <% if (classComponent) { %>
-  export class <%= className %> extends Component<<%= className %>Props> {
+  export class <%= className %> extends Component<{}> {
     override render() {
       return (
         <<%= wrapper %><%- extras %>>
@@ -51,7 +47,7 @@ const Styled<%= className %> = styled.div`
     }
   }
   <% } else { %>
-  export function <%= className %>(props: <%= className %>Props) {
+  export function <%= className %>() {
     return (
       <<%= wrapper %><%- extras %>>
         <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
@@ -69,7 +65,7 @@ const Styled<%= className %> = styled.div`
 
   export default <%= className %>;
 <% } else { %>
-  export default function <%= className %>(props: <%= className %>Props) {
+  export default function <%= className %>() {
     return (
       <<%= wrapper %><%- extras %>>
         <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>

packages/react/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap

@@ -66,35 +66,23 @@ describe(AnotherCmp.name, () => {
 
 exports[`React:CypressComponentTestConfiguration should generate tests for existing tsx components 1`] = `
 "import * as React from 'react';
-import SomeLib, { SomeLibProps } from './some-lib';
+import SomeLib from './some-lib';
 
 describe(SomeLib.name, () => {
-  let props: SomeLibProps;
-
-  beforeEach(() => {
-    props = {};
-  });
-
   it('renders', () => {
-    cy.mount(<SomeLib {...props} />);
+    cy.mount(<SomeLib />);
   });
 });
 "
 `;
 
 exports[`React:CypressComponentTestConfiguration should generate tests for existing tsx components 2`] = `
 "import * as React from 'react';
-import AnotherCmp, { AnotherCmpProps } from './another-cmp';
+import AnotherCmp from './another-cmp';
 
 describe(AnotherCmp.name, () => {
-  let props: AnotherCmpProps;
-
-  beforeEach(() => {
-    props = {};
-  });
-
   it('renders', () => {
-    cy.mount(<AnotherCmp {...props} />);
+    cy.mount(<AnotherCmp />);
   });
 });
 "