test(e2e): add cases for create-rsbuild (#2912)

e2e/cases/create-rsbuild/helper.ts

@@ -0,0 +1,55 @@
+import { execSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+import { expect } from '@playwright/test';
+import fse from 'fs-extra';
+
+export const expectPackageJson = (
+  pkgJson: Record<string, any>,
+  name: string,
+) => {
+  expect(pkgJson.name).toBe(name);
+  expect(pkgJson.scripts.dev).toBe('rsbuild dev --open');
+  expect(pkgJson.scripts.build).toBe('rsbuild build');
+  expect(pkgJson.devDependencies['@rsbuild/core']).toBeTruthy();
+};
+
+export const createAndValidate = (
+  cwd: string,
+  template: string,
+  {
+    name = `test-temp-${template}`,
+    tools = [],
+    clean = true,
+  }: {
+    name?: string;
+    tools?: string[];
+    clean?: boolean;
+  } = {},
+) => {
+  const dir = path.join(cwd, name);
+  fse.removeSync(dir);
+
+  let command = `npx create-rsbuild -d ${name} -t ${template}`;
+  if (tools.length) {
+    const toolsCmd = tools.map((tool) => `--tools ${tool}`).join(' ');
+    command += ` ${toolsCmd}`;
+  }
+
+  execSync(command, { cwd });
+
+  const pkgJson = fse.readJSONSync(path.join(dir, 'package.json'));
+  expectPackageJson(pkgJson, path.basename(name));
+
+  if (template.endsWith('-ts')) {
+    expect(pkgJson.devDependencies.typescript).toBeTruthy();
+    expect(existsSync(path.join(dir, 'tsconfig.json'))).toBeTruthy();
+  }
+
+  const cleanFn = () => fse.removeSync(dir);
+  if (clean) {
+    cleanFn();
+  }
+
+  return { dir, pkgJson, clean: cleanFn };
+};

e2e/cases/create-rsbuild/index.test.ts

@@ -0,0 +1,158 @@
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+import { createAndValidate } from './helper';
+
+rspackOnlyTest('should create vanilla project as expected', async () => {
+  createAndValidate(__dirname, 'vanilla');
+});
+
+rspackOnlyTest('should create vanilla-ts project as expected', async () => {
+  createAndValidate(__dirname, 'vanilla-ts');
+});
+
+rspackOnlyTest('should create react project as expected', async () => {
+  const { pkgJson } = createAndValidate(__dirname, 'react');
+  expect(pkgJson.dependencies.react).toBeTruthy();
+  expect(pkgJson.dependencies['react-dom']).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-react']).toBeTruthy();
+});
+
+rspackOnlyTest('should create react-ts project as expected', async () => {
+  const { pkgJson } = createAndValidate(__dirname, 'react-ts');
+  expect(pkgJson.dependencies.react).toBeTruthy();
+  expect(pkgJson.dependencies['react-dom']).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-react']).toBeTruthy();
+});
+
+rspackOnlyTest('should create preact project as expected', async () => {
+  const { pkgJson } = createAndValidate(__dirname, 'preact');
+  expect(pkgJson.dependencies.preact).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-preact']).toBeTruthy();
+});
+
+rspackOnlyTest('should create preact-ts project as expected', async () => {
+  const { pkgJson } = createAndValidate(__dirname, 'preact-ts');
+  expect(pkgJson.dependencies.preact).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-preact']).toBeTruthy();
+});
+
+rspackOnlyTest('should create vue3 project as expected', async () => {
+  const { pkgJson } = createAndValidate(__dirname, 'vue3');
+  expect(pkgJson.dependencies.vue).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-vue']).toBeTruthy();
+});
+
+rspackOnlyTest('should create vue3-ts project as expected', async () => {
+  const { pkgJson } = createAndValidate(__dirname, 'vue3-ts');
+  expect(pkgJson.dependencies.vue).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-vue']).toBeTruthy();
+});
+
+rspackOnlyTest('should create vue2 project as expected', async () => {
+  const { pkgJson } = createAndValidate(__dirname, 'vue2');
+  expect(pkgJson.dependencies.vue).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-vue2']).toBeTruthy();
+});
+
+rspackOnlyTest('should create vue2-ts project as expected', async () => {
+  const { pkgJson } = createAndValidate(__dirname, 'vue2-ts');
+  expect(pkgJson.dependencies.vue).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-vue2']).toBeTruthy();
+});
+
+rspackOnlyTest('should create lit project as expected', async () => {
+  const { pkgJson } = createAndValidate(__dirname, 'lit');
+  expect(pkgJson.dependencies.lit).toBeTruthy();
+});
+
+rspackOnlyTest('should create lit-ts project as expected', async () => {
+  const { pkgJson } = createAndValidate(__dirname, 'lit-ts');
+  expect(pkgJson.dependencies.lit).toBeTruthy();
+});
+
+rspackOnlyTest('should create solid project as expected', async () => {
+  const { pkgJson } = createAndValidate(__dirname, 'solid');
+  expect(pkgJson.dependencies['solid-js']).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-solid']).toBeTruthy();
+});
+
+rspackOnlyTest('should create solid-ts project as expected', async () => {
+  const { pkgJson } = createAndValidate(__dirname, 'solid-ts');
+  expect(pkgJson.dependencies['solid-js']).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-solid']).toBeTruthy();
+});
+
+rspackOnlyTest('should create svelte project as expected', async () => {
+  const { pkgJson } = createAndValidate(__dirname, 'svelte');
+  expect(pkgJson.dependencies.svelte).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-svelte']).toBeTruthy();
+});
+
+rspackOnlyTest('should create svelte-ts project as expected', async () => {
+  const { pkgJson } = createAndValidate(__dirname, 'svelte-ts');
+  expect(pkgJson.dependencies.svelte).toBeTruthy();
+  expect(pkgJson.devDependencies['@rsbuild/plugin-svelte']).toBeTruthy();
+});
+
+rspackOnlyTest('should allow to create project in sub dir', async () => {
+  createAndValidate(__dirname, 'vanilla', {
+    name: 'test-temp-dir/rsbuild-project',
+  });
+});
+
+rspackOnlyTest('should allow to create project in relative dir', async () => {
+  createAndValidate(__dirname, 'vanilla', {
+    name: './test-temp-relative-dir',
+  });
+});
+
+rspackOnlyTest('should create project with eslint as expected', async () => {
+  const { dir, pkgJson, clean } = createAndValidate(__dirname, 'vanilla', {
+    name: 'test-temp-eslint',
+    tools: ['eslint'],
+    clean: false,
+  });
+  expect(pkgJson.devDependencies.eslint).toBeTruthy();
+  expect(existsSync(join(dir, 'eslint.config.mjs'))).toBeTruthy();
+  clean();
+});
+
+rspackOnlyTest('should create project with prettier as expected', async () => {
+  const { dir, pkgJson, clean } = createAndValidate(__dirname, 'vanilla', {
+    name: 'test-temp-prettier',
+    tools: ['prettier'],
+    clean: false,
+  });
+  expect(pkgJson.devDependencies.prettier).toBeTruthy();
+  expect(existsSync(join(dir, '.prettierrc'))).toBeTruthy();
+  clean();
+});
+
+rspackOnlyTest(
+  'should create project with eslint and prettier as expected',
+  async () => {
+    const { dir, pkgJson, clean } = createAndValidate(__dirname, 'vanilla', {
+      name: 'test-temp-eslint-prettier',
+      tools: ['eslint', 'prettier'],
+      clean: false,
+    });
+    expect(pkgJson.devDependencies.eslint).toBeTruthy();
+    expect(pkgJson.devDependencies.prettier).toBeTruthy();
+    expect(existsSync(join(dir, '.prettierrc'))).toBeTruthy();
+    expect(existsSync(join(dir, 'eslint.config.mjs'))).toBeTruthy();
+    clean();
+  },
+);
+
+rspackOnlyTest('should create project with biome as expected', async () => {
+  const { dir, pkgJson, clean } = createAndValidate(__dirname, 'vanilla', {
+    name: 'test-temp-eslint',
+    tools: ['biome'],
+    clean: false,
+  });
+  expect(pkgJson.devDependencies['@biomejs/biome']).toBeTruthy();
+  expect(existsSync(join(dir, 'biome.json'))).toBeTruthy();
+  clean();
+});

e2e/package.json

@@ -52,6 +52,7 @@
     "@types/node": "18.x",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "create-rsbuild": "workspace:*",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "playwright": "1.44.1",

pnpm-workspace.yaml

@@ -7,3 +7,4 @@ packages:
   - '!**/compiled/**'
   - '!**/dist-types/**'
   - '!**/create-rsbuild/template-*/**'
+  - '!**/test-temp-*/**'