generate-react-cli 10.1.0 → 11.0.0

package/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',
       ],
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generate-react-cli",
-  "version": "10.1.0",
+  "version": "11.0.0",
   "description": "A simple React CLI to generate components instantly and more.",
   "author": "Armin Broubakarian",
   "license": "MIT",

package/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();
 });
 ```
 

package/src/templates/component/componentJsTemplate.js

@@ -1,6 +1,4 @@
-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">
@@ -8,9 +6,5 @@ const templatename = () => (
   </div>
 );
 
-templatename.propTypes = {};
-
-templatename.defaultProps = {};
-
 export default templatename;
 `;

package/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>

package/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 = {};
 `;

package/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();
 });`;

package/src/templates/component/componentTestTestingLibraryTemplate.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');

package/src/templates/component/componentTestVitestTemplate.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();
+  });
+});
+`;

package/src/templates/component/componentTsLazyTemplate.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>

package/src/templates/component/componentTsTemplate.js

@@ -1,4 +1,4 @@
-export default `import React, { FC } from 'react';
+export default `import type { FC } from 'react';
 import styles from './templatename.module.css';
 
 interface templatenameProps {}

package/src/utils/generateComponentUtils.js

@@ -12,13 +12,13 @@ import componentLazyTemplate from '../templates/component/componentLazyTemplate.
 import componentStoryTemplate from '../templates/component/componentStoryTemplate.js';
 import componentStyledTemplate from '../templates/component/componentStyledTemplate.js';
 import componentTestDefaultTemplate from '../templates/component/componentTestDefaultTemplate.js';
-import componentTestEnzymeTemplate from '../templates/component/componentTestEnzymeTemplate.js';
 import componentTestTestingLibraryTemplate from '../templates/component/componentTestTestingLibraryTemplate.js';
+import componentTestVitestTemplate from '../templates/component/componentTestVitestTemplate.js';
 import componentTsLazyTemplate from '../templates/component/componentTsLazyTemplate.js';
 import componentTsTemplate from '../templates/component/componentTsTemplate.js';
-import { error, fileSummary } from './messagesUtils.js';
+import { error, exitWithError, fileSummary } from './messagesUtils.js';
 
-const templateNameRE = /.*(template[|_-]?name).*/i;
+const TEMPLATE_NAME_REGEX = /template[-_]?name/i;
 
 const { existsSync, outputFileSync, readFileSync } = fsExtra;
 
@@ -35,15 +35,13 @@ export function getComponentByType(args, cliConfigFile) {
 
     if (!selectedComponentType) {
       const availableTypes = Object.keys(cliConfigFile.component).join(', ');
-      error(`Unknown component type "${componentType}"`, {
+      exitWithError(`Unknown component type "${componentType}"`, {
         details: `Available types: ${availableTypes}`,
         suggestions: [
           `Use one of the available types: ${availableTypes}`,
           'Add this component type to your generate-react-cli.json config',
         ],
       });
-
-      process.exit(1);
     }
 
     // Otherwise return it.
@@ -61,7 +59,7 @@ export function getCorrespondingComponentFileTypes(component) {
 }
 
 function getCustomTemplate(componentName, templatePath) {
-  // --- Try loading custom template
+  // Try loading custom template
 
   try {
     const template = readFileSync(templatePath, 'utf8');
@@ -69,15 +67,13 @@ function getCustomTemplate(componentName, templatePath) {
 
     return { template, filename };
   } catch {
-    error(`Custom template not found: "${templatePath}"`, {
+    exitWithError(`Custom template not found: "${templatePath}"`, {
       suggestions: [
         'Verify the template path in your generate-react-cli.json config',
         'Check that the file exists and is readable',
         'Use an absolute path or a path relative to project root',
       ],
     });
-
-    return process.exit(1);
   }
 }
 
@@ -97,17 +93,15 @@ function componentDirectoryNameGenerator({ cmd, componentName, cliConfigFile, fi
     if (customDirectoryConfigs.length > 0) {
       const customDirectory = customDirectoryConfigs.slice(-1).toString();
 
-      // Double check if the customDirectory is templatable
-      if (templateNameRE.exec(customDirectory) == null) {
-        error(`Invalid customDirectory: "${customDirectory}"`, {
+      // Check if the customDirectory contains a template placeholder
+      if (!TEMPLATE_NAME_REGEX.test(customDirectory)) {
+        exitWithError(`Invalid customDirectory: "${customDirectory}"`, {
           details: 'customDirectory must contain a template placeholder',
           suggestions: [
             'Use templatename, TemplateName, template-name, or template_name',
             'Example: "{{templatename}}" or "TemplateName"',
           ],
         });
-
-        process.exit(-2);
       }
 
       for (const convertor in convertors) {
@@ -137,7 +131,7 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convert
   // Check for a custom component template.
 
   if (customTemplates && customTemplates.component) {
-    // --- Load and use the custom component template
+    // Load and use the custom component template
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
@@ -147,18 +141,19 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convert
     template = customTemplate;
     filename = customTemplateFilename;
   } else {
-    // --- Else use GRC built-in component template
+    // Else use GRC built-in component template
 
     template = usesTypeScript ? componentTsTemplate : componentJsTemplate;
     filename = usesTypeScript ? `${componentName}.tsx` : `${componentName}.js`;
 
-    // --- If test library is not Testing Library or if withTest is false. Remove data-testid from template
+    // If test library doesn't use data-testid or if withTest is false. Remove data-testid from template
 
-    if (testLibrary !== 'Testing Library' || !cmd.withTest) {
+    const usesTestId = testLibrary === 'Testing Library' || testLibrary === 'Vitest';
+    if (!usesTestId || !cmd.withTest) {
       template = template.replace(` data-testid="templatename"`, '');
     }
 
-    // --- If it has a corresponding stylesheet
+    // If it has a corresponding stylesheet
 
     if (cmd.withStyle) {
       if (cliConfigFile.usesStyledComponents) {
@@ -174,7 +169,7 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convert
         const module = usesCssModule ? '.module' : '';
         const cssPath = `${componentName}${module}.${cssPreprocessor}`;
 
-        // --- If the css module is true make sure to update the template accordingly
+        // If the css module is true make sure to update the template accordingly
 
         if (module.length) {
           template = template.replace(`'./templatename.module.css'`, `'./${cssPath}'`);
@@ -184,7 +179,7 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convert
         }
       }
     } else {
-      // --- If no stylesheet, remove className attribute and style import from jsTemplate
+      // If no stylesheet, remove className attribute and style import from jsTemplate
 
       template = template.replace(` className={styles.templatename}`, '');
       template = template.replace(`import styles from './templatename.module.css';`, '');
@@ -206,7 +201,7 @@ function componentStyleTemplateGenerator({ cliConfigFile, cmd, componentName, co
   // Check for a custom style template.
 
   if (customTemplates && customTemplates.style) {
-    // --- Load and use the custom style template
+    // Load and use the custom style template
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
@@ -224,7 +219,7 @@ function componentStyleTemplateGenerator({ cliConfigFile, cmd, componentName, co
       const module = usesCssModule ? '.module' : '';
       const cssFilename = `${componentName}${module}.${cssPreprocessor}`;
 
-      // --- Else use GRC built-in style template
+      // Else use GRC built-in style template
 
       template = componentCssTemplate;
       filename = cssFilename;
@@ -247,7 +242,7 @@ function componentTestTemplateGenerator({ cliConfigFile, cmd, componentName, con
   // Check for a custom test template.
 
   if (customTemplates && customTemplates.test) {
-    // --- Load and use the custom test template
+    // Load and use the custom test template
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
@@ -259,12 +254,10 @@ function componentTestTemplateGenerator({ cliConfigFile, cmd, componentName, con
   } else {
     filename = usesTypeScript ? `${componentName}.test.tsx` : `${componentName}.test.js`;
 
-    if (testLibrary === 'Enzyme') {
-      // --- Else use GRC built-in test template based on test library type
-
-      template = componentTestEnzymeTemplate;
-    } else if (testLibrary === 'Testing Library') {
+    if (testLibrary === 'Testing Library') {
       template = componentTestTestingLibraryTemplate;
+    } else if (testLibrary === 'Vitest') {
+      template = componentTestVitestTemplate;
     } else {
       template = componentTestDefaultTemplate;
     }
@@ -286,7 +279,7 @@ function componentStoryTemplateGenerator({ cliConfigFile, cmd, componentName, co
   // Check for a custom story template.
 
   if (customTemplates && customTemplates.story) {
-    // --- Load and use the custom story template
+    // Load and use the custom story template
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
@@ -296,7 +289,7 @@ function componentStoryTemplateGenerator({ cliConfigFile, cmd, componentName, co
     template = customTemplate;
     filename = customTemplateFilename;
   } else {
-    // --- Else use GRC built-in story template
+    // Else use GRC built-in story template
 
     template = componentStoryTemplate;
     filename = usesTypeScript ? `${componentName}.stories.tsx` : `${componentName}.stories.js`;
@@ -318,7 +311,7 @@ function componentLazyTemplateGenerator({ cmd, componentName, cliConfigFile, con
   // Check for a custom lazy template.
 
   if (customTemplates && customTemplates.lazy) {
-    // --- Load and use the custom lazy template
+    // Load and use the custom lazy template
 
     const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
       componentName,
@@ -328,7 +321,7 @@ function componentLazyTemplateGenerator({ cmd, componentName, cliConfigFile, con
     template = customTemplate;
     filename = customTemplateFilename;
   } else {
-    // --- Else use GRC built-in lazy template
+    // Else use GRC built-in lazy template
 
     template = usesTypeScript ? componentTsLazyTemplate : componentLazyTemplate;
     filename = usesTypeScript ? `${componentName}.lazy.tsx` : `${componentName}.lazy.js`;
@@ -350,18 +343,16 @@ function customFileTemplateGenerator({ componentName, cmd, cliConfigFile, compon
   // Check for a valid custom template for the corresponding custom component file.
 
   if (!customTemplates || !customTemplates[fileType]) {
-    error(`Missing custom template for "${fileType}"`, {
+    exitWithError(`Missing custom template for "${fileType}"`, {
       details: 'Custom component files require a matching custom template',
       suggestions: [
         `Add a "${fileType}" template path to customTemplates in your config`,
         'Check that the template file exists at the specified path',
       ],
     });
-
-    return process.exit(1);
   }
 
-  // --- Load and use the custom component template.
+  // Load and use the custom component template.
 
   const { template: customTemplate, filename: customTemplateFilename } = getCustomTemplate(
     componentName,
@@ -378,7 +369,7 @@ function customFileTemplateGenerator({ componentName, cmd, cliConfigFile, compon
   };
 }
 
-// --- Built in component file types
+// Built in component file types
 
 const buildInComponentFileTypes = {
   COMPONENT: 'component',
@@ -388,7 +379,7 @@ const buildInComponentFileTypes = {
   LAZY: 'withLazy',
 };
 
-// --- Generate component template map
+// Generate component template map
 
 const componentTemplateGeneratorMap = {
   [buildInComponentFileTypes.COMPONENT]: componentTemplateGenerator,
@@ -404,7 +395,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
   let basePath = '';
 
   componentFileTypes.forEach((componentFileType) => {
-    // --- Generate templates only if the component options (withStyle, withTest, etc..) are true,
+    // Generate templates only if the component options (withStyle, withTest, etc..) are true,
     // or if the template type is "component"
 
     if (
@@ -436,7 +427,7 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
         basePath = path.dirname(componentPath);
       }
 
-      // --- Make sure the component does not already exist in the path directory.
+      // Make sure the component does not already exist in the path directory.
 
       if (existsSync(componentPath)) {
         generatedFiles.push({ filename, status: 'skipped', path: componentPath });
@@ -445,67 +436,9 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
           if (!cmd.dryRun) {
             outputFileSync(componentPath, template);
 
-            // Will replace the templatename in whichever format the user typed the component name in the command.
-            replace({
-              regex: 'templatename',
-              replacement: convertors.templatename,
-              paths: [componentPath],
-              recursive: false,
-              silent: true,
-            });
-
-            // Will replace the TemplateName in PascalCase
-            replace({
-              regex: 'TemplateName',
-              replacement: convertors.TemplateName,
-              paths: [componentPath],
-              recursive: false,
-              silent: true,
-            });
-
-            // Will replace the templateName in camelCase
-            replace({
-              regex: 'templateName',
-              replacement: convertors.templateName,
-              paths: [componentPath],
-              recursive: false,
-              silent: true,
-            });
-
-            // Will replace the template-name in kebab-case
-            replace({
-              regex: 'template-name',
-              replacement: convertors['template-name'],
-              paths: [componentPath],
-              recursive: false,
-              silent: true,
-            });
-
-            // Will replace the template_name in snake_case
-            replace({
-              regex: 'template_name',
-              replacement: convertors.template_name,
-              paths: [componentPath],
-              recursive: false,
-              silent: true,
-            });
-
-            // Will replace the TEMPLATE_NAME in uppercase SNAKE_CASE
-            replace({
-              regex: 'TEMPLATE_NAME',
-              replacement: convertors.TEMPLATE_NAME,
-              paths: [componentPath],
-              recursive: false,
-              silent: true,
-            });
-
-            // Will replace the TEMPLATENAME in uppercase SNAKE_CASE
-            replace({
-              regex: 'TEMPLATENAME',
-              replacement: convertors.TEMPLATENAME,
-              paths: [componentPath],
-              recursive: false,
-              silent: true,
+            // Replace all template placeholders with their corresponding component name formats
+            Object.entries(convertors).forEach(([pattern, replacement]) => {
+              replace({ regex: pattern, replacement, paths: [componentPath], recursive: false, silent: true });
             });
           }
 

package/src/utils/grcConfigUtils.js

@@ -3,7 +3,7 @@ import inquirer from 'inquirer';
 
 import merge from 'lodash/merge.js';
 import deepKeys from './deepKeysUtils.js';
-import { blank, error, header, outro, success } from './messagesUtils.js';
+import { blank, error, exitWithError, header, outro, success } from './messagesUtils.js';
 
 const { accessSync, constants, outputFileSync, readFileSync } = fsExtra;
 const { prompt } = inquirer;
@@ -40,7 +40,7 @@ const projectLevelQuestions = [
     type: 'select',
     name: 'testLibrary',
     message: 'What testing library does your project use?',
-    choices: ['Testing Library', 'Enzyme', 'None'],
+    choices: ['Testing Library', 'Vitest', 'None'],
   },
 ];
 
@@ -76,7 +76,7 @@ export const componentLevelQuestions = [
     type: 'confirm',
     name: 'component.default.withLazy',
     message:
-      'Would you like to create a corresponding lazy file (a file that lazy-loads your component out of the box and enables code splitting: https://reactjs.org/docs/code-splitting.html#code-splitting) with each component you generate?',
+      'Would you like to create a corresponding lazy file (a file that lazy-loads your component out of the box and enables code splitting: https://react.dev/reference/react/lazy) with each component you generate?',
   },
 ];
 
@@ -99,9 +99,9 @@ async function createCLIConfigFile() {
     outputFileSync('generate-react-cli.json', JSON.stringify(answers, null, 2));
 
     blank();
-    success('Config file created successfully');
+    success('Created the generate-react-cli.json config file');
     blank();
-    outro('You can always update it manually. Happy Hacking!');
+    outro('You can always update the config file manually. Happy Hacking!');
 
     return answers;
   } catch (e) {
@@ -132,9 +132,9 @@ async function updateCLIConfigFile(missingConfigQuestions, currentConfigFile) {
     );
 
     blank();
-    success('Config file updated successfully');
+    success('Updated the generate-react-cli.json config file');
     blank();
-    outro('You can always update it manually. Happy Hacking!');
+    outro('You can always update the config file manually. Happy Hacking!');
 
     return updatedAnswers;
   } catch (e) {
@@ -186,13 +186,12 @@ export async function getCLIConfigFile() {
       return await createCLIConfigFile();
     }
   } catch {
-    error('Not in project root', {
+    exitWithError('Not in project root', {
       details: 'Could not find package.json in current directory',
       suggestions: [
         'Run this command from your project root directory',
         'Make sure package.json exists in the current directory',
       ],
     });
-    return process.exit(1);
   }
 }

package/src/utils/messagesUtils.js

@@ -1,5 +1,7 @@
 import chalk from 'chalk';
 
+const DEFAULT_TERMINAL_WIDTH = 80;
+
 // Symbols for consistent visual feedback
 const symbols = {
   success: chalk.green('✓'),
@@ -12,10 +14,14 @@ const symbols = {
 
 // Create a responsive divider that adapts to terminal width
 function divider(color = 'cyan') {
-  const width = Math.min(process.stdout.columns || 80, 80);
+  const width = Math.min(process.stdout.columns || DEFAULT_TERMINAL_WIDTH, DEFAULT_TERMINAL_WIDTH);
   return chalk[color]('─'.repeat(width));
 }
 
+function pluralize(count, word) {
+  return count === 1 ? word : `${word}s`;
+}
+
 // Success message with optional file path
 export function success(message, filePath) {
   if (filePath) {
@@ -45,6 +51,12 @@ export function error(message, { details, suggestions } = {}) {
   console.log();
 }
 
+// Error message with exit
+export function exitWithError(message, options = {}, exitCode = 1) {
+  error(message, options);
+  process.exit(exitCode);
+}
+
 // Warning message
 export function warning(message) {
   console.log(`${symbols.warning} ${chalk.yellow(message)}`);
@@ -102,12 +114,11 @@ export function fileSummary(files, basePath, { dryRun = false } = {}) {
   } else {
     // Actual run: show what happened
     if (createdFiles.length > 0) {
-      console.log(`${symbols.success} ${chalk.green(`Created ${createdFiles.length} file${createdFiles.length === 1 ? '' : 's'} in ${basePath}`)}`);
+      console.log(`${symbols.success} ${chalk.green(`Created ${createdFiles.length} ${pluralize(createdFiles.length, 'file')} in ${basePath}`)}`);
     }
     if (skippedFiles.length > 0) {
-      console.log(`${symbols.warning} ${chalk.yellow(`Skipped ${skippedFiles.length} file${skippedFiles.length === 1 ? '' : 's'} (already exist)`)}`);
+      console.log(`${symbols.warning} ${chalk.yellow(`Skipped ${skippedFiles.length} ${pluralize(skippedFiles.length, 'file')} (already exist)`)}`);
     }
-    console.log();
 
     // Show file tree with status icons
     files.forEach((file, index) => {

package/src/templates/component/componentTestEnzymeTemplate.js

@@ -1,16 +0,0 @@
-export default `import React from 'react';
-import { shallow } from 'enzyme';
-import templatename from './templatename';
-
-describe('<templatename />', () => {
-  let component;
-
-  beforeEach(() => {
-    component = shallow(<templatename />);
-  });
-
-  test('It should mount', () => {
-    expect(component.length).toBe(1);
-  });
-});
-`;