Merge pull request #183 from arminbro/dev

Dev

Author: arminbro

bin/generate-react.js

@@ -12,7 +12,6 @@ function isNotValidNodeVersion() {
       details: 'Generate React CLI requires Node 22 or higher',
       suggestions: [
         'Update your Node.js version to 22 or higher',
-        'Use nvm to manage multiple Node versions: nvm install 22',
       ],
     });
 

readme.md

@@ -55,6 +55,12 @@ When you run GRC within your project the first time, it will ask you a series of
 }
 ```
 
+#### Test library options:
+
+- `Testing Library` - Generates tests using [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
+- `Vitest` - Generates tests using [Vitest](https://vitest.dev/) with React Testing Library
+- `None` - Generates basic tests using React's createRoot API
+
 ## Generate Components
 
 ```sh
@@ -119,7 +125,7 @@ Otherwise, if you don't pass any options, it will just use the default values th
   <tr>
     <td width="20%"><b>--withLazy</b></td>
     <td width="60%">
-      Creates a corresponding lazy file (a file that lazy-loads your component out of the box and enables <a href="https://reactjs.org/docs/code-splitting.html#code-splitting">code splitting</a>) with this component.
+      Creates a corresponding lazy file (a file that lazy-loads your component out of the box and enables <a href="https://react.dev/reference/react/lazy">code splitting</a>) with this component.
     </td>
     <td width="20%">Boolean</td>
     <td width="20%"><code>component.default.withLazy<code></td>
@@ -295,7 +301,6 @@ Notice in the `page.customTemplates` that we only specified the `test` custom te
 ```jsx
 // templates/component/TemplateName.js
 
-import React from 'react';
 import styles from './TemplateName.module.css';
 
 const TemplateName = () => (
@@ -324,14 +329,14 @@ export default TemplateName;
 ```jsx
 // templates/component/TemplateName.test.js
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import TemplateName from './TemplateName';
 
-it('It should mount', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<TemplateName />, div);
-  ReactDOM.unmountComponentAtNode(div);
+it('should mount', () => {
+  const container = document.createElement('div');
+  const root = createRoot(container);
+  root.render(<TemplateName />);
+  root.unmount();
 });
 ```
 

src/templates/component/componentJsTemplate.js

@@ -1,16 +1,10 @@
-export default `import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './templatename.module.css';
+export default `import styles from './templatename.module.css';
 
 const templatename = () => (
   <div className={styles.templatename} data-testid="templatename">
     templatename Component
   </div>
 );
 
-templatename.propTypes = {};
-
-templatename.defaultProps = {};
-
 export default templatename;
 `;

src/templates/component/componentLazyTemplate.js

@@ -1,8 +1,8 @@
-export default `import React, { lazy, Suspense } from 'react';
+export default `import { lazy, Suspense } from 'react';
 
 const Lazytemplatename = lazy(() => import('./templatename'));
 
-const templatename = props => (
+const templatename = (props) => (
   <Suspense fallback={null}>
     <Lazytemplatename {...props} />
   </Suspense>

src/templates/component/componentStoryTemplate.js

@@ -1,13 +1,9 @@
-export default `/* eslint-disable */
-import templatename from './templatename';
+export default `import templatename from './templatename';
 
 export default {
-  title: "templatename",
+  title: 'templatename',
+  component: templatename,
 };
 
-export const Default = () => <templatename />;
-
-Default.story = {
-  name: 'default',
-};
+export const Default = {};
 `;

src/templates/component/componentTestDefaultTemplate.js

@@ -1,9 +1,9 @@
-export default `import React from 'react';
-import ReactDOM from 'react-dom';
+export default `import { createRoot } from 'react-dom/client';
 import templatename from './templatename';
 
-it('It should mount', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<templatename />, div);
-  ReactDOM.unmountComponentAtNode(div);
+it('should mount', () => {
+  const container = document.createElement('div');
+  const root = createRoot(container);
+  root.render(<templatename />);
+  root.unmount();
 });`;

src/templates/component/componentTestEnzymeTemplate.js

@@ -1,10 +1,9 @@
-export default `import React from 'react';
-import { render, screen } from '@testing-library/react';
+export default `import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import templatename from './templatename';
 
 describe('<templatename />', () => {
-  test('it should mount', () => {
+  test('should mount', () => {
     render(<templatename />);
 
     const templateName = screen.getByTestId('templatename');

src/templates/component/componentTestTestingLibraryTemplate.js

@@ -0,0 +1,15 @@
+export default `import { describe, test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import templatename from './templatename';
+
+describe('<templatename />', () => {
+  test('should mount', () => {
+    render(<templatename />);
+
+    const templateName = screen.getByTestId('templatename');
+
+    expect(templateName).toBeInTheDocument();
+  });
+});
+`;

src/templates/component/componentTestVitestTemplate.js

@@ -1,8 +1,8 @@
-export default `import React, { lazy, Suspense } from 'react';
+export default `import { lazy, Suspense, ComponentProps } from 'react';
 
 const Lazytemplatename = lazy(() => import('./templatename'));
 
-const templatename = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode; }) => (
+const templatename = (props: ComponentProps<typeof Lazytemplatename>) => (
   <Suspense fallback={null}>
     <Lazytemplatename {...props} />
   </Suspense>