@component-hook/create-app 1.4.4 → 1.5.1

package/{template-shared/LICENSE → LICENSE}

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c)
+Copyright (c) 2023 Tzuyi 
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -3,7 +3,7 @@
 Scaffolding a basic `typescript` project.
 
 > **Compatibility Note:**
-> Requires [Node.js](https://nodejs.org/en/) version 20.19+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.
+> Requires [Node.js](https://nodejs.org/en/) version 20.19.6+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.
 
 <p>
   <a href="https://npm-stat.com/charts.html?package=@component-hook/create-app">

package/dist/index.d.mts

@@ -1 +1 @@
-export { };
+export {}

package/dist/index.mjs

@@ -8,7 +8,6 @@ import minimist from "minimist";
 import ora from "ora";
 import colors from "picocolors";
 import prompts from "prompts";
-
 //#region src/constants.ts
 const DEFAULT_PROJECT_NAME = "basic-project";
 const TEMPLATES = ["vue", "react"];
@@ -19,7 +18,6 @@ const CI = [
 	"gitlab-ci",
 	"none"
 ];
-
 //#endregion
 //#region src/utils.ts
 function formatTargetDir(targetDir) {
@@ -45,8 +43,8 @@ function toUpperCasePackageName(projectName) {
 function getPkgManagerInfo() {
 	const userAgent = process.env.npm_config_user_agent;
 	if (!userAgent) return;
-	const [pkgManager] = userAgent.split(" ");
-	const [name, version] = pkgManager.split("/");
+	const [pkgManager] = userAgent.split(" ", 1);
+	const [name, version] = pkgManager.split("/", 2);
 	return {
 		name,
 		version
@@ -69,7 +67,6 @@ function getCiArtContent(ci = "") {
 	if (!ciName) return "";
 	return `- **CI/CD**: Integrates \`${ciName}\` for automated testing and deployment.`;
 }
-
 //#endregion
 //#region src/prompts.ts
 function builtinTemplate(template) {
@@ -85,95 +82,100 @@ function styleTitle(title) {
 	return colors.bold(colors.magenta(title));
 }
 function operationPrompts({ targetDir, template, ci }) {
-	return prompts([
-		{
-			type: targetDir ? null : "text",
-			name: "projectName",
-			message: styleTitle("Project name:"),
-			initial: DEFAULT_PROJECT_NAME
-		},
-		{
-			type: (nameAnswer) => {
-				const dir = nameAnswer ?? targetDir;
-				return existsSync(dir) && !isEmptyFolder(dir) ? "select" : null;
-			},
-			name: "overwrite",
-			message: (nameAnswer) => {
-				const dirName = nameAnswer ?? targetDir;
-				return styleTitle(`${dirName === "." ? "current directory" : `Target directory "${dirName}"`} is not empty. Please choose how to proceed:`);
-			},
-			initial: 0,
-			choices: [
-				{
-					title: "Cancel operation",
-					value: "cancel"
-				},
-				{
-					title: "Remove existing files and continue",
-					value: "overwrite"
-				},
-				{
-					title: "Ignore files and continue",
-					value: "ignore"
-				}
-			]
+	const projectName = {
+		type: targetDir ? null : "text",
+		name: "projectName",
+		message: styleTitle("Project name:"),
+		initial: DEFAULT_PROJECT_NAME
+	};
+	const overwrite = {
+		type: (nameAnswer) => {
+			const dir = nameAnswer ?? targetDir;
+			return existsSync(dir) && !isEmptyFolder(dir) ? "select" : null;
 		},
-		{
-			type: (overwriteAnswer) => {
-				if (overwriteAnswer === "cancel") onCancel();
-				return null;
-			},
-			name: "overwriteChecker"
+		name: "overwrite",
+		message: (nameAnswer) => {
+			const dirName = nameAnswer ?? targetDir;
+			return styleTitle(`${dirName === "." ? "current directory" : `Target directory "${dirName}"`} is not empty. Please choose how to proceed:`);
 		},
-		{
-			type: (_, { projectName: nameAnswer }) => {
-				return isValidPackageName(getProjectName(nameAnswer ?? targetDir)) ? null : "text";
+		initial: 0,
+		choices: [
+			{
+				title: "Cancel operation",
+				value: "cancel"
 			},
-			name: "packageName",
-			message: styleTitle("Package name:"),
-			initial: (_, { projectName: nameAnswer }) => {
-				return toValidPackageName(getProjectName(nameAnswer ?? targetDir));
+			{
+				title: "Remove existing files and continue",
+				value: "overwrite"
 			},
-			validate: (name) => {
-				return isValidPackageName(name) || "Invalid package.json name";
+			{
+				title: "Ignore files and continue",
+				value: "ignore"
 			}
+		]
+	};
+	const overwriteChecker = {
+		type: (overwriteAnswer) => {
+			if (overwriteAnswer === "cancel") onCancel();
+			return null;
 		},
-		{
-			type: builtinTemplate(template) ? null : "select",
-			name: "framework",
-			message: template ? styleTitle(`${colors.red(template)} isn't a valid template. Please choose from below:`) : styleTitle("Select a framework:"),
-			initial: 0,
-			choices: [{
-				title: colors.green("Vue"),
-				value: "vue"
-			}, {
-				title: colors.blue("React"),
-				value: "react"
-			}]
+		name: "overwriteChecker"
+	};
+	const packageName = {
+		type: (_, { projectName: nameAnswer }) => {
+			return isValidPackageName(getProjectName(nameAnswer ?? targetDir)) ? null : "text";
 		},
-		{
-			type: checkCi(ci) ? null : "select",
-			name: "ci",
-			message: ci ? styleTitle(`${colors.red(ci)} isn't a valid CI/CD. Please choose from below:`) : styleTitle("Choose CI/CD:"),
-			choices: [
-				{
-					title: "GitHub Actions",
-					value: "github-actions"
-				},
-				{
-					title: "GitLab CI",
-					value: "gitlab-ci"
-				},
-				{
-					title: "None",
-					value: "none"
-				}
-			],
-			initial: 0
+		name: "packageName",
+		message: styleTitle("Package name:"),
+		initial: (_, { projectName: nameAnswer }) => {
+			return toValidPackageName(getProjectName(nameAnswer ?? targetDir));
+		},
+		validate: (name) => {
+			return isValidPackageName(name) || "Invalid package.json name";
 		}
+	};
+	const framework = {
+		type: builtinTemplate(template) ? null : "select",
+		name: "framework",
+		message: styleTitle(template ? `${colors.red(template)} isn't a valid template. Please choose from below:` : "Select a framework:"),
+		initial: 0,
+		choices: [{
+			title: colors.green("Vue"),
+			value: "vue"
+		}, {
+			title: colors.blue("React"),
+			value: "react"
+		}]
+	};
+	const ciPrompt = {
+		type: checkCi(ci) ? null : "select",
+		name: "ci",
+		message: styleTitle(ci ? `${colors.red(ci)} isn't a valid CI/CD. Please choose from below:` : "Choose CI/CD:"),
+		choices: [
+			{
+				title: "GitHub Actions",
+				value: "github-actions"
+			},
+			{
+				title: "GitLab CI",
+				value: "gitlab-ci"
+			},
+			{
+				title: "None",
+				value: "none"
+			}
+		],
+		initial: 0
+	};
+	return prompts([
+		projectName,
+		overwrite,
+		overwriteChecker,
+		packageName,
+		framework,
+		ciPrompt
 	], { onCancel });
 }
-
 //#endregion
 //#region src/index.ts
 const cwd = process.cwd();
@@ -223,9 +225,9 @@ async function writePackageJson(root, dir, packageName) {
 }
 async function copyFolder(root, dir, packageName, ci) {
 	const files = await readdir(dir);
-	const ignoreFiles = new Set(["package.json", ...ciFilters[ci] || ciFilters.none]);
+	const ignoreFiles = /* @__PURE__ */ new Set(["package.json", ...ciFilters[ci] || ciFilters.none]);
 	const filterFiles = files.filter((file) => !ignoreFiles.has(file));
-	const rewriteOrCopyFile = (file) => {
+	const rewriteOrCopyFile = async (file) => {
 		const targetPath = path.join(root, renameFiles?.[file] ?? file);
 		const templatePath = path.join(dir, file);
 		if (file.endsWith(".art")) {
@@ -240,8 +242,10 @@ async function copyFolder(root, dir, packageName, ci) {
 		}
 		if (statSync(templatePath).isDirectory()) {
 			const rewriteOrCopySubFilePromises = readdirSync(templatePath).map((subFile) => rewriteOrCopyFile(path.join(file, subFile)));
-			return Promise.all(rewriteOrCopySubFilePromises).then(() => {});
-		} else return copy(templatePath, targetPath);
+			await Promise.all(rewriteOrCopySubFilePromises);
+			return;
+		}
+		return copy(templatePath, targetPath);
 	};
 	return Promise.all(filterFiles.map((file) => rewriteOrCopyFile(file)));
 }
@@ -272,12 +276,13 @@ async function createApp() {
 	const filePath = fileURLToPath(import.meta.url);
 	const sharedDir = path.resolve(filePath, "../..", "template-shared");
 	const templateDir = path.resolve(filePath, "../..", `template-${framework}`);
-	Promise.all([
-		copyFolder(root, sharedDir, packageName, ciName),
-		copyFolder(root, templateDir, packageName, ciName),
-		writePackageJson(root, templateDir, packageName),
-		new Promise((resolve) => setTimeout(resolve, 300))
-	]).then(() => {
+	try {
+		await Promise.all([
+			copyFolder(root, sharedDir, packageName, ciName),
+			copyFolder(root, templateDir, packageName, ciName),
+			writePackageJson(root, templateDir, packageName),
+			new Promise((resolve) => setTimeout(resolve, 300))
+		]);
 		const cdProjectName = path.relative(cwd, root);
 		const formattedCdProjectName = cdProjectName.includes(" ") ? `"${cdProjectName}"` : cdProjectName;
 		spinner.succeed(`${colors.green("Scaffolded project in")} ${colors.yellow(root)}`);
@@ -291,13 +296,17 @@ async function createApp() {
 			console.log(colors.cyan(`  ${pkgManager} run dev`));
 		}
 		console.log();
-	}).catch(() => {
+	} catch {
 		spinner.fail(colors.red("Failed to scaffold project"));
-	});
+	}
 }
-createApp().catch((error) => {
-	console.error(colors.red(error.message));
-});
-
+async function bootstrap() {
+	try {
+		await createApp();
+	} catch (error) {
+		console.error(colors.red(error instanceof Error ? error.message : String(error)));
+	}
+}
+bootstrap();
 //#endregion
-export {  };
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@component-hook/create-app",
   "type": "module",
-  "version": "1.4.4",
+  "version": "1.5.1",
   "description": "Scaffolding a basic typescript project",
   "author": "Tzuyi",
   "license": "MIT",
@@ -27,9 +27,9 @@
   },
   "dependencies": {
     "art-template": "^4.13.4",
-    "fs-extra": "^11.3.3",
+    "fs-extra": "^11.4.0",
     "minimist": "^1.2.8",
-    "ora": "^9.3.0",
+    "ora": "^9.4.1",
     "picocolors": "^1.1.1",
     "prompts": "^2.4.2"
   },

package/template-react/.vscode/extensions.json

@@ -1,9 +0,0 @@
-{
-  "recommendations": [
-    "bradlc.vscode-tailwindcss",
-    "esbenp.prettier-vscode",
-    "csstools.postcss",
-    "cpylua.language-postcss",
-    "streetsidesoftware.code-spell-checker"
-  ]
-}

package/template-react/.vscode/settings.json

@@ -1,18 +0,0 @@
-{
-  "editor.tabSize": 2,
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-
-  "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-
-  "debug.javascript.autoAttachFilter": "smart",
-
-  "typescript.tsdk": "node_modules/typescript/lib",
-
-  "workbench.editor.splitInGroupLayout": "vertical",
-  "terminal.integrated.shellIntegration.enabled": true,
-
-  "cSpell.words": ["dotenv", "unplugin", "Sonarjs", "typecheck", "pxtorem", "norem", "partialize"]
-}

package/template-react/README.md.art

@@ -1,84 +0,0 @@
-# {{projectName}}
-
-This project is built with [react](https://react.dev/) + [vite](https://vite.dev/), using [pnpm](https://pnpm.io/) for package management and [zustand](https://zustand-demo.pmnd.rs/) for state management.
-
-## Features
-
-- **Development Experience**: Written in [typeScript](https://www.typescriptlang.org/), styled with [tailwindcss](https://tailwindcss.com/), and structured with [react-router-dom](https://reactrouter.com/), and [react-i18next](https://react.i18next.com/). Supports SVGs ([vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons)).
-- **API & Mocking**: Handles requests with [axios](https://axios-http.com/docs/intro) and mocks APIs using [msw](https://mswjs.io/).
-- **Code Quality**: Enforces standards with [eslint](https://eslint.org/) and [prettier](https://prettier.io/), with [husky](https://www.npmjs.com/package/husky), [commitlint](https://commitlint.js.org/#/), and [lint-staged](https://github.com/okonet/lint-staged) for commit validation.
-- **Testing**: Uses [vitest](https://vitest.dev/) + [testing-library](https://testing-library.com/) for unit testing and [playwright](https://playwright.dev/) for E2E testing.
-- **Optimization**: Compresses CSS with [cssnano](https://cssnano.github.io/cssnano/), converts units with [postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem), convert modern CSS into something most browsers can understand with [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env), and analyzes assets with [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer).
-{{ciContent}}
-
-## Code Features / Opinions
-
-- Project root aliased as `@` to `<project_root>/src`
-- ESlint plugin use [@component-hook/eslint-plugin](https://www.npmjs.com/package/@component-hook/eslint-plugin?activeTab=readme)
-- if encounter npx: command not found, can execute `ln -s $(which npx) /usr/local/bin/npx` in zsh
-- Predefined and fully typed global variables:
-  - `VITE_APP_VERSION` is read from `package.json` version at build time
-  - `VITE_APP_LAST_COMMIT_HASH` is last commit hash at build time
-  - `VITE_APP_BUILD_EPOCH` is populated as `Date.now()` at build time
-  - `VITE_APP_MOCK` is use mock environment
-
-## Project Files
-
-```text
-src/
-├── __tests__/
-│   ├── __mocks__/
-│   ├── e2e/*
-│   └── unit/*
-├── assets/*
-│   └── svg-icons
-│          └── react.svg
-├── components/
-│   └── common
-│       ├── svg-icon/
-│       │   ├── src
-│       │   │   └── index.tsx
-│       │   └── index.ts
-│       └── index.ts
-├── constants/*
-├── hooks/*
-├── mocks/
-│   ├── handlers/*
-│   │   ├── modules/*
-│   │   └── index.ts
-│   │── browser.ts
-│   └── server.ts
-├── pages/
-│   └── home/
-│       ├── components
-│       │   └── hello-world
-│       │       └── index.tsx
-│       ├── index.module.css
-│       └── index.tsx
-├── plugins/
-│   └── i18n
-│       ├── locales
-│       │   ├── es-US.json
-│       │   └── zh-TW.json
-│       └── index.ts
-├── router/
-│   └── index.tsx
-├── stores/
-│   ├── modules
-│   │   └── config.ts
-│   ├── constants.ts
-│   ├── index.ts
-│   └── middleware.ts
-├── styles/
-│   ├── common/
-|   │   ├── all.css
-|   │   └── button.css
-│   ├── base.css
-│   ├── index.css
-│   └── tailwind.css
-├── types/*
-├── utils/*
-├── App.tsx
-├── vite-env.d.ts
-└── main.tsx
-```

package/template-react/eslint.config.js

@@ -1,18 +0,0 @@
-import componentHookPlugin from '@component-hook/eslint-plugin';
-
-export default [
-  ...componentHookPlugin.configs.basic,
-  ...componentHookPlugin.configs.react,
-  componentHookPlugin.configs.prettier,
-  ...componentHookPlugin.configs.sonarjs,
-  componentHookPlugin.configs.security,
-  ...componentHookPlugin.configs.markdown,
-  {
-    files: ['**/__tests__/unit/**/*.test.[jt]s?(x)'],
-    ...componentHookPlugin.configs['testing-library/react'],
-  },
-  {
-    files: ['**/__tests__/e2e/**/*.spec.[jt]s?(x)'],
-    ...componentHookPlugin.configs.playwright,
-  },
-];

package/template-react/index.html.art

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{{projectName}}</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/template-react/lint-staged.config.js

@@ -1,6 +0,0 @@
-/** @type {import('lint-staged').Configuration} */
-
-export default {
-  '*.{ts,tsx}': () => 'pnpm typecheck',
-  '*.{ts,js,tsx,jsx}': () => 'pnpm lint',
-};

package/template-react/package.json

@@ -1,69 +0,0 @@
-{
-  "name": "react-starter",
-  "type": "module",
-  "version": "0.0.0",
-  "private": true,
-  "packageManager": "pnpm@10.29.2",
-  "scripts": {
-    "dev": "vite",
-    "dev:mock": "MOCK=true vite",
-    "build": "pnpm typecheck && vite build",
-    "lint": "eslint --fix .",
-    "test:unit": "vitest --coverage",
-    "test:e2e": "playwright test --headed",
-    "test:ui-e2e": "playwright test --ui",
-    "test:ci-e2e": "playwright test",
-    "typecheck": "tsc --noEmit",
-    "prepare": "husky",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "axios": "^1.13.5",
-    "i18next": "^25.8.4",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-i18next": "^16.5.4",
-    "react-router-dom": "^7.13.0",
-    "zustand": "^5.0.11"
-  },
-  "optionalDependencies": {
-    "@commitlint/cli": "^20.4.1",
-    "@commitlint/config-conventional": "^20.4.1",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.2.7"
-  },
-  "devDependencies": {
-    "@component-hook/eslint-plugin": "^1.4.2",
-    "@playwright/test": "^1.58.2",
-    "@tailwindcss/vite": "^4.1.18",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@tsconfig/node24": "^24.0.4",
-    "@types/node": "^22.19.11",
-    "@types/react": "^19.2.13",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react-swc": "^4.2.3",
-    "@vitest/coverage-v8": "^4.0.18",
-    "cssnano": "^7.1.2",
-    "eslint": "^9.39.2",
-    "fast-glob": "^3.3.3",
-    "jsdom": "^28.1.0",
-    "msw": "^2.12.10",
-    "postcss": "^8.5.6",
-    "postcss-preset-env": "^11.1.3",
-    "postcss-pxtorem": "^6.1.0",
-    "prettier": "^3.8.1",
-    "prettier-plugin-tailwindcss": "^0.7.2",
-    "tailwindcss": "^4.1.18",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-svg-icons": "^2.0.1",
-    "vitest": "^4.0.18"
-  },
-  "msw": {
-    "workerDirectory": [
-      "public"
-    ]
-  }
-}

package/template-react/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template-react/src/App.tsx

@@ -1,6 +0,0 @@
-import { RouterProvider } from 'react-router-dom';
-import router from './router';
-
-export function App() {
-  return <RouterProvider router={router} />;
-}

package/template-react/src/__tests__/e2e/home.spec.ts

@@ -1,40 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('/');
-});
-
-test('click Vite logo open Vite official website blank tab', async ({ page }) => {
-  const link = page.getByRole('link', { name: /vite logo/i });
-
-  await expect(link).toBeVisible();
-  const [popup] = await Promise.all([page.waitForEvent('popup'), link.evaluate((node: HTMLElement) => node.click())]);
-
-  await popup.waitForLoadState();
-  await expect(popup).toHaveTitle('Vite | Next Generation Frontend Tooling');
-});
-
-test('click React logo open React official website blank tab', async ({ page }) => {
-  await page.addStyleTag({ content: `* { animation: none !important; }` });
-  const link = page.getByLabel(/react link/i);
-
-  await expect(link).toBeVisible();
-  const [popup] = await Promise.all([page.waitForEvent('popup'), link.evaluate((node: HTMLElement) => node.click())]);
-
-  await popup.waitForLoadState();
-  await expect(popup).toHaveTitle('React');
-});
-
-test('homepage count button interact', async ({ page }) => {
-  await page.getByRole('button', { name: 'count is 0' }).click();
-  await expect(page.getByRole('button', { name: 'count is 1' })).toBeVisible();
-  await page.getByRole('button', { name: 'count is 1' }).click();
-  await expect(page.getByRole('button', { name: 'count is 2' })).toBeVisible();
-});
-
-test('locale change interact', async ({ page }) => {
-  await page.getByRole('button', { name: 'English' }).click();
-  await expect(page.getByRole('button', { name: '中文' })).toBeVisible();
-  await page.getByRole('button', { name: '中文' }).click();
-  await expect(page.getByRole('button', { name: 'English' })).toBeVisible();
-});

package/template-react/src/__tests__/unit/pages/home/components/HelloWorld.test.tsx

@@ -1,45 +0,0 @@
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { renderComponent } from '@/__tests__/unit/render';
-import { HelloWorld } from '@/pages/home/components/hello-world';
-import i18n from '@/plugins/i18n';
-import { useConfigStore } from '@/stores';
-
-describe('home page HelloWorld component', () => {
-  const { t } = i18n;
-
-  it('renders the correct content', () => {
-    const title = 'Hello World!';
-    const { appMeta } = useConfigStore.getState();
-
-    renderComponent(<HelloWorld title={title} />);
-    expect(screen.getByRole('heading', { name: title })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /count is 0/i })).toBeInTheDocument();
-    expect(screen.getByText(/edit/i)).toBeInTheDocument();
-    expect(screen.getByText(/src\/app\.tsx/i)).toBeInTheDocument();
-    expect(screen.getByText(/save to test hmr/i)).toBeInTheDocument();
-    expect(screen.getByText(/click on the vite and react logos to learn more/i)).toBeInTheDocument();
-    expect(screen.getByText(`${appMeta.version} - Built at: ${appMeta.builtAt.toLocaleString()}`)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: t('language') })).toBeInTheDocument();
-  });
-
-  it('count button interact', async () => {
-    renderComponent(<HelloWorld />);
-    const countButton = screen.getByRole('button', { name: /count is 0/i });
-
-    await userEvent.click(countButton);
-    expect(countButton).toHaveTextContent(/count is 1/i);
-    await userEvent.click(countButton);
-    await userEvent.click(countButton);
-    expect(countButton).toHaveTextContent(/count is 3/i);
-  });
-
-  it('locale change interact', async () => {
-    renderComponent(<HelloWorld />);
-    const localeButton = screen.getByRole('button', { name: t('language') });
-
-    expect(localeButton).toHaveTextContent('English');
-    await userEvent.click(localeButton);
-    expect(localeButton).toHaveTextContent('中文');
-  });
-});