chore: reform package.json scripts, fix e2e and verify node env for vitest

Author: qinsong77

.eslintrc.js renamed to .eslintrc.cjs

@@ -16,7 +16,7 @@ jobs:
     - name: Install dependencies
       run: npm install -g pnpm && pnpm install
     - name: Install Playwright Browsers
-      run: pnpm exec playwright install --with-deps
+      run: pnpm exec playwright install --with-deps chromium
     - name: Run Playwright tests
       run: pnpm exec playwright test
     - uses: actions/upload-artifact@v4

.github/workflows/playwright.yml

@@ -1,6 +1,5 @@
 .next
 dist
-.cache
 package-lock.json
 public
 node_modules

.prettierignore

@@ -7,5 +7,6 @@
   "bracketSpacing": true,
   "singleAttributePerLine": true,
   "endOfLine": "lf",
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["clsx", "cn", "cva"]
 }

.prettierrc

@@ -31,7 +31,7 @@ This is a [Next.js](https://nextjs.org/) 14 Boilerplate project base on [`create
 
 - i18n
 - ~~E2E test~~
-- Zustand
+- Zustand, too simplify, maybe RTK if needed
 - after gpr, run pnpm install automatically
 - how to update rsc in client?
 - Update to Next.js 15

README.md

@@ -17,7 +17,13 @@ test('app journey', async ({ page }) => {
   await expect(footerText).toBeVisible()
 
   const navLinks = page.locator('nav a')
-  const expectedLinksText = ['Loading', 'dashboard', 'todo demos', 'GitHub']
+  const expectedLinksText = [
+    'Loading',
+    'dashboard',
+    'line chart',
+    'todo demos',
+    'GitHub',
+  ]
 
   for (let i = 0; i < expectedLinksText.length; i++) {
     const linkText = await navLinks.nth(i).textContent()
@@ -31,7 +37,7 @@ test('app journey', async ({ page }) => {
     page.getByRole('heading', { name: 'Show loading UI and streaming' }),
   ).toBeVisible()
 
-  await navLinks.nth(2).click()
+  await navLinks.nth(3).click()
   await expect(page).toHaveURL('/todo')
   await expect(
     page.getByRole('heading', { name: 'Todo demo with RCC' }),

e2e/app.spec.ts

@@ -0,0 +1,37 @@
+// @vitest-environment node
+
+import * as fs from 'fs/promises'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { readFile } from './read-file'
+
+vi.mock('fs/promises')
+
+describe('readFile function', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('should read file content successfully', async () => {
+    const mockContent = 'This is the file content'
+    const mockPath = '/path/to/file.txt'
+
+    vi.mocked(fs.readFile).mockResolvedValue(mockContent)
+
+    const result = await readFile(mockPath)
+
+    expect(result).toBe(mockContent)
+    expect(fs.readFile).toHaveBeenCalledWith(mockPath, 'utf8')
+  })
+
+  it('should throw an error when file reading fails', async () => {
+    const mockPath = '/path/to/nonexistent/file.txt'
+    const mockError = new Error('File not found')
+
+    vi.mocked(fs.readFile).mockRejectedValue(mockError)
+
+    await expect(readFile(mockPath)).rejects.toThrow(
+      `Error reading file: ${mockPath}. Error: ${mockError}`,
+    )
+  })
+})

lib/server/read-file.test.ts

@@ -2,22 +2,23 @@
   "name": "next-js-boilerplate",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
+    "prepare": "husky",
+    "dev": "next dev | pino-pretty",
+    "dev:turbo": "next dev --turbo | pino-pretty",
     "build": "next build",
     "build-analyze": "cross-env ANALYZE=true pnpm run build",
     "check-types": "tsc --noEmit --pretty",
-    "dev": "next dev | pino-pretty",
-    "dev:turbo": "next dev --turbo | pino-pretty",
-    "preinstall": "npx only-allow pnpm",
     "lint": "next lint",
-    "lint-fix": "next lint --fix && pnpm run prettier:fix",
-    "prepare": "husky",
-    "prettier:fix": "prettier '**/*.{js,jsx,ts,tsx,json,md}' --write",
-    "start": "next build && cp -r dist/static dist/standalone/dist/static && cp -r public dist/standalone/public && node dist/standalone/server.js",
+    "lint-and-format-fix": "next lint --fix && pnpm run prettier:fix",
+    "format:fix": "prettier '**/*.{js,jsx,ts,tsx,json,md}' --write",
+    "preview": "next build && cp -r dist/static dist/standalone/dist/static && cp -r public dist/standalone/public && node dist/standalone/server.js",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "test:e2e": "playwright test",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.0",

lint-staged.config.js renamed to lint-staged.config.cjs

@@ -1,5 +1,7 @@
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
 import { defineConfig, devices } from '@playwright/test'
-import path from 'path'
 
 /**
  * Read environment variables from file.
@@ -13,14 +15,16 @@ const PORT = process.env.PORT || 3000
 // Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
 const baseURL = `http://localhost:${PORT}`
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
   // Timeout per test
   timeout: 30 * 1000,
   // Test directory
-  testDir: path.join(__dirname, 'e2e'),
+  testDir: join(__dirname, 'e2e'),
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -38,7 +42,7 @@ export default defineConfig({
   // Run your local dev server before starting the tests:
   // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
   webServer: {
-    command: process.env.CI ? 'pnpm run start' : 'pnpm run dev:turbo',
+    command: process.env.CI ? 'pnpm run preview' : 'pnpm run dev:turbo',
     url: baseURL,
     timeout: 2 * 60 * 1000,
     reuseExistingServer: !process.env.CI,

next.config.mjs renamed to next.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},