@nx/react 16.0.0-beta.1

package/src/generators/component/schema.json

@@ -0,0 +1,153 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactComponent",
+  "title": "Create a React Component",
+  "description": "Create a React Component for Nx.",
+  "type": "object",
+  "examples": [
+    {
+      "command": "nx g component my-component --project=mylib",
+      "description": "Generate a component in the `mylib` library"
+    },
+    {
+      "command": "nx g component my-component --project=mylib --classComponent",
+      "description": "Generate a class component in the `mylib` library"
+    }
+  ],
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "alias": "p",
+      "$default": {
+        "$source": "projectName"
+      },
+      "x-prompt": "What is the name of the project for this component?",
+      "x-priority": "important"
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use for the component?",
+      "x-priority": "important"
+    },
+    "style": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "alias": "s",
+      "default": "css",
+      "x-prompt": {
+        "message": "Which stylesheet format would you like to use?",
+        "type": "list",
+        "items": [
+          { "value": "css", "label": "CSS" },
+          {
+            "value": "scss",
+            "label": "SASS(.scss)       [ http://sass-lang.com          ]"
+          },
+          {
+            "value": "less",
+            "label": "LESS              [ http://lesscss.org            ]"
+          },
+          {
+            "value": "styled-components",
+            "label": "styled-components [ https://styled-components.com ]"
+          },
+          {
+            "value": "@emotion/styled",
+            "label": "emotion           [ https://emotion.sh            ]"
+          },
+          {
+            "value": "styled-jsx",
+            "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
+          },
+          {
+            "value": "none",
+            "label": "None"
+          },
+          {
+            "value": "styl",
+            "label": "Stylus(.styl)     [ http://stylus-lang.com        ] (DEPRECATED)"
+          }
+        ]
+      }
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    },
+    "skipTests": {
+      "type": "boolean",
+      "description": "When true, does not create `spec.ts` test files for the new component.",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "directory": {
+      "type": "string",
+      "description": "Create the component under this directory (can be nested).",
+      "alias": "dir",
+      "x-priority": "important"
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Create component at the source root rather than its own directory.",
+      "default": false
+    },
+    "export": {
+      "type": "boolean",
+      "description": "When true, the component is exported from the project `index.ts` (if it exists).",
+      "alias": "e",
+      "default": false,
+      "x-prompt": "Should this component be exported in the project?"
+    },
+    "pascalCaseFiles": {
+      "type": "boolean",
+      "description": "Use pascal case component file name (e.g. `App.tsx`).",
+      "alias": "P",
+      "default": false
+    },
+    "pascalCaseDirectory": {
+      "type": "boolean",
+      "description": "Use pascal case directory name (e.g. `App/App.tsx`).",
+      "alias": "R",
+      "default": false
+    },
+    "classComponent": {
+      "type": "boolean",
+      "alias": "C",
+      "description": "Use class components instead of functional component.",
+      "default": false
+    },
+    "routing": {
+      "type": "boolean",
+      "description": "Generate a library with routes."
+    },
+    "globalCss": {
+      "type": "boolean",
+      "description": "Default is `false`. When `true`, the component is generated with `*.css`/`*.scss` instead of `*.module.css`/`*.module.scss`.",
+      "default": false
+    },
+    "fileName": {
+      "type": "string",
+      "description": "Create a component with this file name."
+    },
+    "inSourceTests": {
+      "type": "boolean",
+      "default": false,
+      "description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files. Read more on the Vitest docs site: https://vitest.dev/guide/in-source.html"
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    }
+  },
+  "required": ["name", "project"]
+}

package/src/generators/component-cypress-spec/component-cypress-spec.d.ts

@@ -0,0 +1,14 @@
+import { Tree } from '@nx/devkit';
+import type * as ts from 'typescript';
+export interface CreateComponentSpecFileSchema {
+    project: string;
+    componentPath: string;
+    js?: boolean;
+    cypressProject?: string;
+    skipFormat?: boolean;
+}
+export declare function componentCypressGenerator(host: Tree, schema: CreateComponentSpecFileSchema): Promise<void>;
+export declare function getArgsDefaultValue(property: ts.SyntaxKind): string;
+export declare function createComponentSpecFile(tree: Tree, { project, componentPath, js, cypressProject }: CreateComponentSpecFileSchema): void;
+export default componentCypressGenerator;
+export declare const componentCypressSchematic: (generatorOptions: CreateComponentSpecFileSchema) => (tree: any, context: any) => Promise<any>;

package/src/generators/component-cypress-spec/component-cypress-spec.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentCypressSchematic = exports.createComponentSpecFile = exports.getArgsDefaultValue = exports.componentCypressGenerator = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const ast_utils_1 = require("../../utils/ast-utils");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+let tsModule;
+function componentCypressGenerator(host, schema) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        createComponentSpecFile(host, schema);
+        if (!schema.skipFormat) {
+            yield (0, devkit_1.formatFiles)(host);
+        }
+    });
+}
+exports.componentCypressGenerator = componentCypressGenerator;
+// TODO: candidate to refactor with the angular component story
+function getArgsDefaultValue(property) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const typeNameToDefault = {
+        [tsModule.SyntaxKind.StringKeyword]: '',
+        [tsModule.SyntaxKind.NumberKeyword]: 0,
+        [tsModule.SyntaxKind.BooleanKeyword]: false,
+    };
+    const resolvedValue = typeNameToDefault[property];
+    if (typeof resolvedValue === undefined) {
+        return '';
+    }
+    else if (typeof resolvedValue === 'string') {
+        return resolvedValue.replace(/\s/g, '+');
+    }
+    else {
+        return resolvedValue;
+    }
+}
+exports.getArgsDefaultValue = getArgsDefaultValue;
+function createComponentSpecFile(tree, { project, componentPath, js, cypressProject }) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const e2eProjectName = cypressProject || `${project}-e2e`;
+    const projects = (0, devkit_1.getProjects)(tree);
+    const e2eProject = projects.get(e2eProjectName);
+    // cypress >= v10 will have a cypress.config.ts < v10 will have a cypress.json
+    const isCypressV10 = tree.exists((0, path_1.join)(e2eProject.root, 'cypress.config.ts'));
+    const e2eLibIntegrationFolderPath = (0, path_1.join)(e2eProject.sourceRoot, isCypressV10 ? 'e2e' : 'integration');
+    const proj = projects.get(project);
+    const componentFilePath = (0, devkit_1.joinPathFragments)(proj.sourceRoot, componentPath);
+    const componentName = componentFilePath
+        .slice(componentFilePath.lastIndexOf('/') + 1)
+        .replace('.tsx', '')
+        .replace('.jsx', '')
+        .replace('.js', '');
+    const contents = tree.read(componentFilePath, 'utf-8');
+    if (contents === null) {
+        throw new Error(`Failed to read ${componentFilePath}`);
+    }
+    const sourceFile = tsModule.createSourceFile(componentFilePath, contents, tsModule.ScriptTarget.Latest, true);
+    const cmpDeclaration = (0, ast_utils_1.getComponentNode)(sourceFile);
+    if (!cmpDeclaration) {
+        const componentNodes = (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile);
+        if (componentNodes === null || componentNodes === void 0 ? void 0 : componentNodes.length) {
+            componentNodes.forEach((declaration) => {
+                findPropsAndGenerateFileForCypress(tree, sourceFile, declaration, e2eLibIntegrationFolderPath, componentName, project, js, true);
+            });
+        }
+        else {
+            throw new Error(`Could not find any React component in file ${componentFilePath}`);
+        }
+    }
+    else {
+        findPropsAndGenerateFileForCypress(tree, sourceFile, cmpDeclaration, e2eLibIntegrationFolderPath, componentName, project, js);
+    }
+}
+exports.createComponentSpecFile = createComponentSpecFile;
+function findPropsAndGenerateFileForCypress(tree, sourceFile, cmpDeclaration, e2eLibIntegrationFolderPath, componentName, project, js, fromNodeArray) {
+    const propsInterface = (0, ast_utils_1.getComponentPropsInterface)(sourceFile, cmpDeclaration);
+    let props = [];
+    if (propsInterface) {
+        props = propsInterface.members.map((member) => {
+            return {
+                name: member.name.text,
+                defaultValue: getArgsDefaultValue(member.type.kind),
+            };
+        });
+    }
+    const isCypressV10 = (0, path_1.basename)(e2eLibIntegrationFolderPath) === 'e2e';
+    const cyFilePrefix = isCypressV10 ? 'cy' : 'spec';
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, './files'), `${e2eLibIntegrationFolderPath}/${fromNodeArray
+        ? componentName + '--' + cmpDeclaration.name.text
+        : componentName}`, {
+        projectName: project,
+        componentName,
+        componentSelector: cmpDeclaration.name.text,
+        props,
+        fileExt: js ? `${cyFilePrefix}.js` : `${cyFilePrefix}.ts`,
+    });
+}
+exports.default = componentCypressGenerator;
+exports.componentCypressSchematic = (0, devkit_1.convertNxGenerator)(componentCypressGenerator);
+//# sourceMappingURL=component-cypress-spec.js.map

package/src/generators/component-cypress-spec/component-cypress-spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-cypress-spec.js","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/component-cypress-spec/component-cypress-spec.ts"],"names":[],"mappings":"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"}

package/src/generators/component-cypress-spec/files/__componentName__.__fileExt__

@@ -0,0 +1,13 @@
+describe('<%=projectName%>: <%= componentSelector %> component', () => {
+  beforeEach(() => cy.visit('/iframe.html?id=<%= componentSelector.toLowerCase() %>--primary<% if ( props && props.length > 0 ) { %>&args=<% } %><%
+    for(let prop of props) {
+      %><%=prop.name%><%
+      if(prop.defaultValue !== undefined && (prop.defaultValue || prop.defaultValue === false)) {
+        %>:<%=prop.defaultValue%><%
+      } %>;<%
+    }%>'));
+    
+    it('should render the component', () => {
+      cy.get('h1').should('contain', 'Welcome to <%=componentSelector%>!');
+    });
+});

package/src/generators/component-cypress-spec/schema.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactComponentCypressSpec",
+  "title": "Create component Cypress spec",
+  "description": "Create a Cypress spec for a UI component that has a story.",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The project name for which to generate tests.",
+      "examples": ["shared-ui-component"],
+      "$default": {
+        "$source": "projectName",
+        "index": 0
+      },
+      "x-prompt": "What's name of the project for which to generate tests?",
+      "x-priority": "important"
+    },
+    "componentPath": {
+      "type": "string",
+      "description": "Relative path to the component file from the library root?",
+      "examples": ["lib/components"],
+      "x-prompt": "What's path of the component relative to the project's lib root for which to generate a test?",
+      "x-priority": "important"
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    },
+    "cypressProject": {
+      "type": "string",
+      "description": "The Cypress project to generate the stories under. By default, inferred from `project`."
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    }
+  },
+  "required": ["project", "componentPath"]
+}

package/src/generators/component-story/component-story.d.ts

@@ -0,0 +1,12 @@
+import { Tree } from '@nx/devkit';
+import type * as ts from 'typescript';
+export interface CreateComponentStoriesFileSchema {
+    project: string;
+    componentPath: string;
+    skipFormat?: boolean;
+}
+export declare function createComponentStoriesFile(host: Tree, { project, componentPath }: CreateComponentStoriesFileSchema): void;
+export declare function findPropsAndGenerateFile(host: Tree, sourceFile: ts.SourceFile, cmpDeclaration: ts.Node, componentDirectory: string, name: string, isPlainJs: boolean, fileExt: string, fromNodeArray?: boolean): void;
+export declare function componentStoryGenerator(host: Tree, schema: CreateComponentStoriesFileSchema): Promise<void>;
+export default componentStoryGenerator;
+export declare const componentStorySchematic: (generatorOptions: CreateComponentStoriesFileSchema) => (tree: any, context: any) => Promise<any>;

package/src/generators/component-story/component-story.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentStorySchematic = exports.componentStoryGenerator = exports.findPropsAndGenerateFile = exports.createComponentStoriesFile = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const ast_utils_1 = require("../../utils/ast-utils");
+const component_props_1 = require("../../utils/component-props");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+let tsModule;
+function createComponentStoriesFile(host, { project, componentPath }) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const proj = (0, devkit_1.getProjects)(host).get(project);
+    const sourceRoot = proj.sourceRoot;
+    const componentFilePath = (0, devkit_1.joinPathFragments)(sourceRoot, componentPath);
+    const componentDirectory = componentFilePath.replace(componentFilePath.slice(componentFilePath.lastIndexOf('/')), '');
+    const isPlainJs = componentFilePath.endsWith('.jsx') || componentFilePath.endsWith('.js');
+    let fileExt = 'tsx';
+    if (componentFilePath.endsWith('.jsx')) {
+        fileExt = 'jsx';
+    }
+    else if (componentFilePath.endsWith('.js')) {
+        fileExt = 'js';
+    }
+    const componentFileName = componentFilePath
+        .slice(componentFilePath.lastIndexOf('/') + 1)
+        .replace('.tsx', '')
+        .replace('.jsx', '')
+        .replace('.js', '');
+    const name = componentFileName;
+    const contents = host.read(componentFilePath, 'utf-8');
+    if (contents === null) {
+        throw new Error(`Failed to read ${componentFilePath}`);
+    }
+    const sourceFile = tsModule.createSourceFile(componentFilePath, contents, tsModule.ScriptTarget.Latest, true);
+    const cmpDeclaration = (0, ast_utils_1.getComponentNode)(sourceFile);
+    if (!cmpDeclaration) {
+        const componentNodes = (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile);
+        if (componentNodes === null || componentNodes === void 0 ? void 0 : componentNodes.length) {
+            componentNodes.forEach((declaration) => {
+                findPropsAndGenerateFile(host, sourceFile, declaration, componentDirectory, name, isPlainJs, fileExt, componentNodes.length > 1);
+            });
+        }
+        else {
+            throw new Error(`Could not find any React component in file ${componentFilePath}`);
+        }
+    }
+    else {
+        findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, isPlainJs, fileExt);
+    }
+}
+exports.createComponentStoriesFile = createComponentStoriesFile;
+function findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, isPlainJs, fileExt, fromNodeArray) {
+    const { propsTypeName, props, argTypes } = (0, component_props_1.getDefaultsForComponent)(sourceFile, cmpDeclaration);
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, './files'), (0, devkit_1.normalizePath)(componentDirectory), {
+        componentFileName: fromNodeArray
+            ? `${name}--${cmpDeclaration.name.text}`
+            : name,
+        componentImportFileName: name,
+        propsTypeName,
+        props,
+        argTypes,
+        componentName: cmpDeclaration.name.text,
+        isPlainJs,
+        fileExt,
+    });
+}
+exports.findPropsAndGenerateFile = findPropsAndGenerateFile;
+function componentStoryGenerator(host, schema) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        createComponentStoriesFile(host, schema);
+        if (!schema.skipFormat) {
+            yield (0, devkit_1.formatFiles)(host);
+        }
+    });
+}
+exports.componentStoryGenerator = componentStoryGenerator;
+exports.default = componentStoryGenerator;
+exports.componentStorySchematic = (0, devkit_1.convertNxGenerator)(componentStoryGenerator);
+//# sourceMappingURL=component-story.js.map

package/src/generators/component-story/component-story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-story.js","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/component-story/component-story.ts"],"names":[],"mappings":"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"}

package/src/generators/component-story/files/__componentFileName__.stories.__fileExt__

@@ -0,0 +1,32 @@
+<% if ( !isPlainJs ) { %>import type { Meta } from '@storybook/react';<% } %>
+import<% if ( !isPlainJs ) { %> { <% } %> <%= componentName %> <% if ( !isPlainJs ) { %> } <% } %> from './<%= componentImportFileName %>';
+
+<% if ( isPlainJs ) { %>
+export default {
+  component: <%= componentName %>,
+  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
+  argTypes: {<% for (let argType of argTypes) { %>
+    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
+}
+   <% } %> 
+};
+<% } %>
+
+
+<% if ( !isPlainJs ) { %>
+const Story: Meta<typeof <%= componentName %>> = {
+  component: <%= componentName %>,
+  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
+  argTypes: {<% for (let argType of argTypes) { %>
+    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
+}
+   <% } %> 
+};
+export default Story;
+<% } %>
+
+export const Primary = {
+  args: {<% for (let prop of props) { %>
+    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
+  },
+};

package/src/generators/component-story/schema.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactComponentStory",
+  "title": "Create component story",
+  "description": "Generate storybook story for a react component.",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "aliases": ["name", "projectName"],
+      "description": "The project where to add the components.",
+      "examples": ["shared-ui-component"],
+      "$default": {
+        "$source": "projectName",
+        "index": 0
+      },
+      "x-prompt": "What's name of the project where the component lives?",
+      "x-priority": "important"
+    },
+    "componentPath": {
+      "type": "string",
+      "description": "Relative path to the component file from the library root.",
+      "examples": ["lib/components"],
+      "x-prompt": "What's path of the component relative to the project's lib root?",
+      "x-priority": "important"
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    }
+  },
+  "required": ["project", "componentPath"]
+}

package/src/generators/component-test/component-test.d.ts

@@ -0,0 +1,4 @@
+import { Tree } from '@nx/devkit';
+import { ComponentTestSchema } from './schema';
+export declare function componentTestGenerator(tree: Tree, options: ComponentTestSchema): Promise<void>;
+export default componentTestGenerator;

package/src/generators/component-test/component-test.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentTestGenerator = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const ast_utils_1 = require("../../utils/ast-utils");
+const component_props_1 = require("../../utils/component-props");
+const versions_1 = require("../../utils/versions");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+let tsModule;
+function componentTestGenerator(tree, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
+        const { assertMinimumCypressVersion } = yield Promise.resolve().then(() => require('@nx/cypress/src/utils/cypress-version'));
+        assertMinimumCypressVersion(10);
+        const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+        const normalizedPath = options.componentPath.startsWith(projectConfig.sourceRoot)
+            ? (0, path_1.relative)(projectConfig.sourceRoot, options.componentPath)
+            : options.componentPath;
+        const componentPath = (0, devkit_1.joinPathFragments)(projectConfig.sourceRoot, normalizedPath);
+        if (tree.exists(componentPath)) {
+            generateSpecsForComponents(tree, componentPath);
+        }
+    });
+}
+exports.componentTestGenerator = componentTestGenerator;
+function generateSpecsForComponents(tree, filePath) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const sourceFile = tsModule.createSourceFile(filePath, tree.read(filePath, 'utf-8'), tsModule.ScriptTarget.Latest, true);
+    const cmpNodes = (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile);
+    const componentDir = (0, path_1.dirname)(filePath);
+    const ext = (0, path_1.extname)(filePath);
+    const fileName = (0, path_1.basename)(filePath, ext);
+    if (tree.exists((0, devkit_1.joinPathFragments)(componentDir, `${fileName}.cy${ext}`))) {
+        return;
+    }
+    const defaultExport = (0, ast_utils_1.getComponentNode)(sourceFile);
+    if (cmpNodes === null || cmpNodes === void 0 ? void 0 : cmpNodes.length) {
+        const components = cmpNodes.map((cmp) => {
+            const defaults = (0, component_props_1.getDefaultsForComponent)(sourceFile, cmp);
+            const isDefaultExport = defaultExport
+                ? defaultExport.name.text === cmp.name.text
+                : false;
+            return {
+                isDefaultExport,
+                props: [...defaults.props, ...defaults.argTypes],
+                name: cmp.name.text,
+                typeName: defaults.propsTypeName,
+            };
+        });
+        const namedImports = components
+            .reduce((imports, cmp) => {
+            if (cmp.typeName) {
+                imports.push(cmp.typeName);
+            }
+            if (cmp.isDefaultExport) {
+                return imports;
+            }
+            imports.push(cmp.name);
+            return imports;
+        }, [])
+            .join(', ');
+        const namedImportStatement = namedImports.length > 0 ? `, { ${namedImports} }` : '';
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files'), componentDir, {
+            fileName,
+            components,
+            importStatement: defaultExport
+                ? `import ${defaultExport.name.text}${namedImportStatement} from './${fileName}'`
+                : `import { ${namedImports} } from './${fileName}'`,
+            ext,
+        });
+    }
+}
+exports.default = componentTestGenerator;
+//# sourceMappingURL=component-test.js.map

package/src/generators/component-test/component-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-test.js","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/component-test/component-test.ts"],"names":[],"mappings":"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"}

package/src/generators/component-test/files/__fileName__.cy__ext__

@@ -0,0 +1,21 @@
+import * as React from 'react'
+<%- importStatement %>
+
+<% for (let cmp of components) { %>
+describe(<%= cmp.name %>.name, () => {<% if (cmp.typeName) { %>
+  let props: <%= cmp.typeName%>;
+
+  beforeEach(() => {
+    props = {<% for (let prop of cmp.props) { %>
+      <%- prop.name %>: <% if(prop.type === 'action') { %>undefined<% } else { %><%- prop.defaultValue %>,<% } %><% }%>
+    }
+  })
+
+  it('renders', () => {
+    cy.mount(<<%= cmp.name %> {...props}/>)
+  })<% } else { %>
+  it('renders', () => {
+    cy.mount(<<%= cmp.name %> />)
+  })<% } %>
+})
+<% } %>

package/src/generators/component-test/schema.d.ts

@@ -0,0 +1,4 @@
+export interface ComponentTestSchema {
+    project: string;
+    componentPath: string;
+}

package/src/generators/component-test/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/src/generators/component-test/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/component-test/schema.ts"],"names":[],"mappings":""}