@nx/react 0.0.0-pr-22179-271588f

package/src/generators/application/lib/get-app-tests.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAppTests = void 0;
+function getAppTests(options) {
+    return `
+it('should render successfully', () => {
+  ${options.routing
+        ? 'const { baseElement } = render(<BrowserRouter><App /></BrowserRouter>);'
+        : 'const { baseElement } = render(<App />);'}
+  expect(baseElement).toBeTruthy();
+});
+
+it('should have a greeting as the title', () => {
+  ${options.routing
+        ? 'const { getByText } = render(<BrowserRouter><App /></BrowserRouter>);'
+        : 'const { getByText } = render(<App />);'}
+  expect(getByText(/Welcome ${options.projectName}/gi)).toBeTruthy();
+});
+`;
+}
+exports.getAppTests = getAppTests;

package/src/generators/application/lib/install-common-dependencies.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function installCommonDependencies(host: Tree, options: NormalizedSchema): import("@nx/devkit").GeneratorCallback;

package/src/generators/application/lib/install-common-dependencies.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installCommonDependencies = void 0;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../../utils/versions");
+function installCommonDependencies(host, options) {
+    if (options.skipPackageJson) {
+        return () => { };
+    }
+    const dependencies = {};
+    const devDependencies = {
+        '@types/node': versions_1.typesNodeVersion,
+        '@types/react': versions_1.typesReactVersion,
+        '@types/react-dom': versions_1.typesReactDomVersion,
+    };
+    if (options.bundler !== 'vite') {
+        dependencies['tslib'] = versions_1.tsLibVersion;
+    }
+    // Vite requires style preprocessors to be installed manually.
+    // `@nx/webpack` installs them automatically for now.
+    if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
+        switch (options.style) {
+            case 'scss':
+                devDependencies['sass'] = versions_1.sassVersion;
+                break;
+            case 'less':
+                devDependencies['less'] = versions_1.lessVersion;
+                break;
+        }
+    }
+    if (options.bundler === 'webpack') {
+        if (options.compiler === 'swc') {
+            devDependencies['swc-loader'] = versions_1.swcLoaderVersion;
+        }
+        else if (options.compiler === 'babel') {
+            // babel-loader is currently included in @nx/webpack
+            // TODO(jack): Install babel-loader and other babel packages only as needed
+            devDependencies['@babel/preset-react'] = versions_1.babelPresetReactVersion;
+            devDependencies['@babel/core'] = versions_1.babelCoreVersion;
+        }
+    }
+    if (options.unitTestRunner && options.unitTestRunner !== 'none') {
+        devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
+    }
+    return (0, devkit_1.addDependenciesToPackageJson)(host, {}, devDependencies);
+}
+exports.installCommonDependencies = installCommonDependencies;

package/src/generators/application/lib/normalize-options.d.ts

@@ -0,0 +1,5 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema, Schema } from '../schema';
+export declare function normalizeDirectory(options: Schema): string;
+export declare function normalizeProjectName(options: Schema): string;
+export declare function normalizeOptions<T extends Schema = Schema>(host: Tree, options: Schema, callingGenerator?: string): Promise<NormalizedSchema<T>>;

package/src/generators/application/lib/normalize-options.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = exports.normalizeProjectName = exports.normalizeDirectory = void 0;
+const devkit_1 = require("@nx/devkit");
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+const assertion_1 = require("../../../utils/assertion");
+const find_free_port_1 = require("./find-free-port");
+function normalizeDirectory(options) {
+    options.directory = options.directory?.replace(/\\{1,2}/g, '/');
+    const { projectDirectory } = (0, devkit_1.extractLayoutDirectory)(options.directory);
+    return projectDirectory
+        ? `${(0, devkit_1.names)(projectDirectory).fileName}/${(0, devkit_1.names)(options.name).fileName}`
+        : (0, devkit_1.names)(options.name).fileName;
+}
+exports.normalizeDirectory = normalizeDirectory;
+function normalizeProjectName(options) {
+    return normalizeDirectory(options).replace(new RegExp('/', 'g'), '-');
+}
+exports.normalizeProjectName = normalizeProjectName;
+async function normalizeOptions(host, options, callingGenerator = '@nx/react:application') {
+    const { projectName: appProjectName, projectRoot: appProjectRoot, projectNameAndRootFormat, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+        name: options.name,
+        projectType: 'application',
+        directory: options.directory,
+        projectNameAndRootFormat: options.projectNameAndRootFormat,
+        rootProject: options.rootProject,
+        callingGenerator,
+    });
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPlugin;
+    options.rootProject = appProjectRoot === '.';
+    options.projectNameAndRootFormat = projectNameAndRootFormat;
+    const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
+    const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
+    const parsedTags = options.tags
+        ? options.tags.split(',').map((s) => s.trim())
+        : [];
+    const fileName = options.pascalCaseFiles ? 'App' : 'app';
+    const styledModule = /^(css|scss|less|tailwind|none)$/.test(options.style)
+        ? null
+        : options.style;
+    (0, assertion_1.assertValidStyle)(options.style);
+    if (options.bundler === 'vite' && options.unitTestRunner !== 'none') {
+        options.unitTestRunner = 'vitest';
+    }
+    const normalized = {
+        ...options,
+        name: (0, devkit_1.names)(options.name).fileName,
+        projectName: appProjectName,
+        appProjectRoot,
+        e2eProjectName,
+        e2eProjectRoot,
+        parsedTags,
+        fileName,
+        styledModule,
+        hasStyles: options.style !== 'none',
+    };
+    normalized.routing = normalized.routing ?? false;
+    normalized.strict = normalized.strict ?? true;
+    normalized.classComponent = normalized.classComponent ?? false;
+    normalized.compiler = normalized.compiler ?? 'babel';
+    normalized.bundler = normalized.bundler ?? 'webpack';
+    normalized.unitTestRunner = normalized.unitTestRunner ?? 'jest';
+    normalized.e2eTestRunner = normalized.e2eTestRunner ?? 'cypress';
+    normalized.inSourceTests = normalized.minimal || normalized.inSourceTests;
+    normalized.devServerPort ??= (0, find_free_port_1.findFreePort)(host);
+    normalized.minimal = normalized.minimal ?? false;
+    return normalized;
+}
+exports.normalizeOptions = normalizeOptions;

package/src/generators/application/lib/set-defaults.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function setDefaults(host: Tree, options: NormalizedSchema): void;

package/src/generators/application/lib/set-defaults.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setDefaults = void 0;
+const devkit_1 = require("@nx/devkit");
+function setDefaults(host, options) {
+    if (options.skipNxJson) {
+        return;
+    }
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    if (options.rootProject) {
+        nxJson.defaultProject = options.projectName;
+    }
+    nxJson.generators = nxJson.generators || {};
+    nxJson.generators['@nx/react'] = nxJson.generators['@nx/react'] || {};
+    const prev = { ...nxJson.generators['@nx/react'] };
+    const appDefaults = {
+        babel: true,
+        style: options.style,
+        linter: options.linter,
+        bundler: options.bundler,
+        ...prev.application,
+    };
+    const componentDefaults = {
+        style: options.style,
+        ...prev.component,
+    };
+    const libDefaults = {
+        style: options.style,
+        linter: options.linter,
+        ...prev.library,
+    };
+    nxJson.generators = {
+        ...nxJson.generators,
+        '@nx/react': {
+            ...prev,
+            application: appDefaults,
+            component: componentDefaults,
+            library: libDefaults,
+        },
+    };
+    (0, devkit_1.updateNxJson)(host, nxJson);
+}
+exports.setDefaults = setDefaults;

package/src/generators/application/lib/show-possible-warnings.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema, Schema } from '../schema';
+export declare function showPossibleWarnings(tree: Tree, options: NormalizedSchema<Schema>): void;

package/src/generators/application/lib/show-possible-warnings.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showPossibleWarnings = void 0;
+const chalk = require("chalk");
+const devkit_1 = require("@nx/devkit");
+function showPossibleWarnings(tree, options) {
+    if (options.style === 'styled-jsx' && options.compiler === 'swc') {
+        devkit_1.logger.warn(`styled-jsx may not work with SWC. Try using ${chalk.bold('nx g @nx/react:app --compiler=babel')} instead.`);
+    }
+}
+exports.showPossibleWarnings = showPossibleWarnings;

package/src/generators/application/lib/update-jest-config.d.ts

@@ -0,0 +1,3 @@
+import { NormalizedSchema } from '../schema';
+import { Tree } from '@nx/devkit';
+export declare function updateSpecConfig(host: Tree, options: NormalizedSchema): void;

package/src/generators/application/lib/update-jest-config.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateSpecConfig = void 0;
+const maybe_js_1 = require("../../../utils/maybe-js");
+const jest_utils_1 = require("../../../utils/jest-utils");
+const devkit_1 = require("@nx/devkit");
+function updateSpecConfig(host, options) {
+    if (options.unitTestRunner === 'none') {
+        return;
+    }
+    (0, devkit_1.updateJson)(host, `${options.appProjectRoot}/tsconfig.spec.json`, (json) => {
+        const compilerOptions = json.compilerOptions ?? {};
+        const types = compilerOptions.types ?? [];
+        if (options.style === 'styled-jsx') {
+            types.push('@nx/react/typings/styled-jsx.d.ts');
+        }
+        types.push('@nx/react/typings/cssmodule.d.ts', '@nx/react/typings/image.d.ts');
+        compilerOptions.types = types;
+        json.compilerOptions = compilerOptions;
+        return json;
+    });
+    if (options.unitTestRunner !== 'jest') {
+        return;
+    }
+    const configPath = (0, maybe_js_1.maybeJs)(options, `${options.appProjectRoot}/jest.config.ts`);
+    const originalContent = host.read(configPath, 'utf-8');
+    const content = (0, jest_utils_1.updateJestConfigContent)(originalContent);
+    host.write(configPath, content);
+}
+exports.updateSpecConfig = updateSpecConfig;

package/src/generators/application/schema.d.ts

@@ -0,0 +1,45 @@
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
+import type { Linter } from '@nx/eslint';
+import type { SupportedStyles } from '../../../typings/style';
+
+export interface Schema {
+  name: string;
+  style: SupportedStyles;
+  skipFormat?: boolean;
+  directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  tags?: string;
+  unitTestRunner?: 'jest' | 'vitest' | 'none';
+  inSourceTests?: boolean;
+  e2eTestRunner: 'cypress' | 'playwright' | 'none';
+  linter: Linter;
+  pascalCaseFiles?: boolean;
+  classComponent?: boolean;
+  routing?: boolean;
+  skipNxJson?: boolean;
+  js?: boolean;
+  globalCss?: boolean;
+  strict?: boolean;
+  setParserOptionsProject?: boolean;
+  compiler?: 'babel' | 'swc';
+  remotes?: string[];
+  devServerPort?: number;
+  skipPackageJson?: boolean;
+  rootProject?: boolean;
+  bundler?: 'webpack' | 'vite' | 'rspack';
+  minimal?: boolean;
+  addPlugin?: boolean;
+}
+
+export interface NormalizedSchema<T extends Schema = Schema> extends T {
+  projectName: string;
+  appProjectRoot: string;
+  e2eProjectName: string;
+  e2eProjectRoot: string;
+  parsedTags: string[];
+  fileName: string;
+  styledModule: null | SupportedStyles;
+  hasStyles: boolean;
+  unitTestRunner: 'jest' | 'vitest' | 'none';
+  addPlugin?: boolean;
+}

package/src/generators/application/schema.json

@@ -0,0 +1,201 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactApp",
+  "title": "Create a React Application",
+  "description": "Create a React application for Nx.",
+  "examples": [
+    {
+      "command": "nx g app myapp --directory=myorg",
+      "description": "Generate `apps/myorg/myapp` and `apps/myorg/myapp-e2e`"
+    },
+    {
+      "command": "nx g app myapp --classComponent",
+      "description": "Use class components instead of functional components"
+    },
+    {
+      "command": "nx g app myapp --routing",
+      "description": "Set up React Router"
+    }
+  ],
+  "type": "object",
+  "properties": {
+    "name": {
+      "description": "The name of the application.",
+      "type": "string",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use for the application?",
+      "pattern": "^[a-zA-Z][^:]*$"
+    },
+    "directory": {
+      "description": "The directory of the new application.",
+      "type": "string",
+      "alias": "dir",
+      "x-priority": "important"
+    },
+    "projectNameAndRootFormat": {
+      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
+    "style": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css",
+      "alias": "s",
+      "x-prompt": {
+        "message": "Which stylesheet format would you like to use?",
+        "type": "list",
+        "items": [
+          {
+            "value": "css",
+            "label": "CSS"
+          },
+          {
+            "value": "scss",
+            "label": "SASS(.scss)       [ https://sass-lang.com                     ]"
+          },
+          {
+            "value": "less",
+            "label": "LESS              [ https://lesscss.org                       ]"
+          },
+          {
+            "value": "tailwind",
+            "label": "tailwind [ https://tailwindcss.com/            ]"
+          },
+          {
+            "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"
+          }
+        ]
+      }
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint", "none"],
+      "default": "eslint"
+    },
+    "routing": {
+      "type": "boolean",
+      "description": "Generate application with routes.",
+      "x-prompt": "Would you like to add React Router to this application?",
+      "default": false
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "skipNxJson": {
+      "description": "Skip updating `nx.json` with default options based on values provided to this app.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "unitTestRunner": {
+      "type": "string",
+      "enum": ["jest", "vitest", "none"],
+      "description": "Test runner to use for unit tests.",
+      "default": "jest"
+    },
+    "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"
+    },
+    "e2eTestRunner": {
+      "type": "string",
+      "enum": ["cypress", "playwright", "none"],
+      "description": "Test runner to use for end to end (E2E) tests.",
+      "x-prompt": "Which E2E test runner would you like to use?",
+      "default": "cypress"
+    },
+    "tags": {
+      "type": "string",
+      "description": "Add tags to the application (used for linting).",
+      "alias": "t"
+    },
+    "pascalCaseFiles": {
+      "type": "boolean",
+      "description": "Use pascal case component file name (e.g. `App.tsx`).",
+      "alias": "P",
+      "default": false
+    },
+    "classComponent": {
+      "type": "boolean",
+      "description": "Use class components instead of functional component.",
+      "alias": "C",
+      "default": false
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    },
+    "globalCss": {
+      "type": "boolean",
+      "description": "Default is `false`. When `true`, the component is generated with `*.css`/`*.scss` instead of `*.module.css`/`*.module.scss`.",
+      "default": false
+    },
+    "strict": {
+      "type": "boolean",
+      "description": "Creates an application with strict mode and strict type checking.",
+      "default": true
+    },
+    "setParserOptionsProject": {
+      "type": "boolean",
+      "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
+      "default": false
+    },
+    "compiler": {
+      "type": "string",
+      "description": "The compiler to use.",
+      "enum": ["babel", "swc"],
+      "default": "babel"
+    },
+    "skipPackageJson": {
+      "description": "Do not add dependencies to `package.json`.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "rootProject": {
+      "description": "Create a application at the root of the workspace",
+      "type": "boolean",
+      "default": false,
+      "hidden": true
+    },
+    "bundler": {
+      "description": "The bundler to use.",
+      "type": "string",
+      "enum": ["vite", "webpack", "rspack"],
+      "x-prompt": "Which bundler do you want to use to build the application?",
+      "default": "webpack",
+      "x-priority": "important"
+    },
+    "minimal": {
+      "description": "Generate a React app with a minimal setup, no separate test files.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": ["name"],
+  "examplesFile": "../../../docs/application-examples.md"
+}

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

@@ -0,0 +1,5 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { Schema } from './schema';
+export declare function componentGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export declare function componentGeneratorInternal(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export default componentGenerator;

package/src/generators/component/component.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentGeneratorInternal = exports.componentGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const path_1 = require("path");
+const add_styled_dependencies_1 = require("../../rules/add-styled-dependencies");
+const ast_utils_1 = require("../../utils/ast-utils");
+const get_in_source_vitest_tests_template_1 = require("../../utils/get-in-source-vitest-tests-template");
+const versions_1 = require("../../utils/versions");
+const get_component_tests_1 = require("./lib/get-component-tests");
+const normalize_options_1 = require("./lib/normalize-options");
+async function componentGenerator(host, schema) {
+    return componentGeneratorInternal(host, {
+        nameAndDirectoryFormat: 'derived',
+        ...schema,
+    });
+}
+exports.componentGenerator = componentGenerator;
+async function componentGeneratorInternal(host, schema) {
+    const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
+    createComponentFiles(host, options);
+    const tasks = [];
+    const styledTask = (0, add_styled_dependencies_1.addStyledModuleDependencies)(host, options);
+    tasks.push(styledTask);
+    addExportsToBarrel(host, options);
+    if (options.routing) {
+        const routingTask = (0, devkit_1.addDependenciesToPackageJson)(host, { 'react-router-dom': versions_1.reactRouterDomVersion }, {});
+        tasks.push(routingTask);
+    }
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(host);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.componentGeneratorInternal = componentGeneratorInternal;
+function createComponentFiles(host, options) {
+    const componentTests = (0, get_component_tests_1.getComponentTests)(options);
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), options.directory, {
+        ...options,
+        componentTests,
+        inSourceVitestTests: (0, get_in_source_vitest_tests_template_1.getInSourceVitestTestsTemplate)(componentTests),
+        tmpl: '',
+    });
+    for (const c of host.listChanges()) {
+        let deleteFile = false;
+        if ((options.skipTests || options.inSourceTests) &&
+            /.*spec.tsx/.test(c.path)) {
+            deleteFile = true;
+        }
+        if ((options.styledModule || !options.hasStyles) &&
+            c.path.endsWith(`.${options.style}`)) {
+            deleteFile = true;
+        }
+        if (options.globalCss && c.path.endsWith(`.module.${options.style}`)) {
+            deleteFile = true;
+        }
+        if (!options.globalCss &&
+            c.path.endsWith(`${options.fileName}.${options.style}`)) {
+            deleteFile = true;
+        }
+        if (deleteFile) {
+            host.delete(c.path);
+        }
+    }
+    if (options.js) {
+        (0, devkit_1.toJS)(host);
+    }
+}
+let tsModule;
+function addExportsToBarrel(host, options) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const workspace = (0, devkit_1.getProjects)(host);
+    const isApp = workspace.get(options.projectName).projectType === 'application';
+    if (options.export && !isApp) {
+        const indexFilePath = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.js ? 'index.js' : 'index.ts');
+        const indexSource = host.read(indexFilePath, 'utf-8');
+        if (indexSource !== null) {
+            const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
+            const relativePathFromIndex = getRelativeImportToFile(indexFilePath, options.filePath);
+            const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from '${relativePathFromIndex}';`));
+            host.write(indexFilePath, changes);
+        }
+    }
+}
+function getRelativeImportToFile(indexPath, filePath) {
+    const { name, dir } = (0, path_1.parse)(filePath);
+    const relativeDirToTarget = (0, path_1.relative)((0, path_1.dirname)(indexPath), dir);
+    return `./${(0, devkit_1.joinPathFragments)(relativeDirToTarget, name)}`;
+}
+exports.default = componentGenerator;

package/src/generators/component/files/__fileName__.module.__style__

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

package/src/generators/component/files/__fileName__.spec.tsx__tmpl__

@@ -0,0 +1,7 @@
+import { render } from '@testing-library/react';
+
+import <%= className %> from './<%= fileName %>';
+
+describe('<%= className %>', () => {
+  <%- componentTests %>
+});