Improved testing structure, fixed integrations

LINGyue-dot · Apr 30, 2023 · 820cd93 · 820cd93
1 parent 94d298c
commit 820cd93
Show file tree

Hide file tree

Showing 11 changed files with 15,587 additions and 12,542 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
     "packages/*"
   ],
   "scripts": {
-    "test": "jest --config test/jest.config.js",
+    "test:unit": "jest --config test/unit/jest.config.js",
+    "test:integration": "jest --config test/integration/jest.config.js",
     "lint": "npm run lint:ts && npm run lint:es",
     "lint:ts": "tsc --noEmit",
     "lint:es": "eslint --ext .ts",
@@ -32,8 +33,10 @@
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
     "eslint": "^8.24.0",
-    "jest": "^27.5.1",
+    "jest": "^29.5.0",
+    "jest-playwright-preset": "^3.0.1",
     "lerna": "^6.5.1",
+    "playwright": "^1.33.0",
     "prettier": "2.7.1"
   }
 }
diff --git a/test/integration/fixtures/custom-postcss-config/craco.config.js b/test/integration/fixtures/custom-postcss-config/craco.config.js
@@ -0,0 +1,38 @@
+const webpack = require('webpack');
+const isDevelopment = false; 
+module.exports = {
+  webpack: {
+    configure: (webpackConfig) => {
+      if (!isDevelopment) {
+        const reactRefreshPluginIndex = webpackConfig.plugins.findIndex(
+          (plugin) => plugin.constructor.name === 'ReactRefreshPlugin'
+        );
+
+        if (reactRefreshPluginIndex !== -1) {
+          webpackConfig.plugins.splice(reactRefreshPluginIndex, 1);
+        }
+
+        const babelLoader = webpackConfig.module.rules.find(
+          (rule) => rule.oneOf && rule.oneOf.find((r) => r.loader && r.loader.includes('babel-loader'))
+        ).oneOf.find((r) => r.loader && r.loader.includes('babel-loader'));
+
+        const reactRefreshBabelIndex = babelLoader.options.plugins.findIndex(
+          (plugin) => plugin && plugin.includes && plugin.includes('react-refresh/babel')
+        );
+
+        if (reactRefreshBabelIndex !== -1) {
+          babelLoader.options.plugins.splice(reactRefreshBabelIndex, 1);
+        }
+      }
+
+      webpackConfig.plugins.push(
+        new webpack.DefinePlugin({
+          __CUSTOM_GLOBAL_CONSTANT__: JSON.stringify("CRACO is working!"),
+        })
+      );
+
+      return webpackConfig;
+    },
+  },
+};
+
diff --git a/test/integration/fixtures/custom-postcss-config/index.html b/test/integration/fixtures/custom-postcss-config/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>React App</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
+
diff --git a/test/integration/fixtures/custom-postcss-config/index.js b/test/integration/fixtures/custom-postcss-config/index.js
@@ -0,0 +1,14 @@
+/* global __CUSTOM_GLOBAL_CONSTANT__ */
+import React from "react";
+import ReactDOM from 'react-dom';
+import './index.css';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <div className="container">
+      <h1>Testing CRACO</h1>
+      <p id="craco-test">{__CUSTOM_GLOBAL_CONSTANT__}</p>
+    </div>
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/test/integration/fixtures/custom-postcss-config/index.test.js b/test/integration/fixtures/custom-postcss-config/index.test.js
@@ -0,0 +1,68 @@
+'use strict';
+const { join } = require('path');
+const { readdirSync, readFileSync } = require('fs');
+const { execSync, spawn } = require('child_process');
+
+const PORT = 3009;
+const URL = `http://localhost:${PORT}/`;
+
+beforeAll(async () => {
+  process.env.NODE_ENV = 'production';
+  // Create a test project using Create React App and CRACO
+  execSync('npx create-react-app test-project',  {
+    cwd: __dirname,
+  });
+  execSync('cd test-project && npm install', { cwd: __dirname });
+  // Copy the necessary files to the test project directory
+  const cracoConfigPath = join(__dirname, 'craco.config.js');
+  const indexPath = join(__dirname, 'index.js');
+  const htmlPath = join(__dirname, 'index.html');
+  const packageJsonPath = join(__dirname, 'package.json');
+  const cracoConfigDestPath = join(__dirname, 'test-project', 'craco.config.js');
+  const indexDestPath = join(__dirname, 'test-project', 'src', 'index.js');
+  const htmlDestPath = join(__dirname, 'test-project', 'public', 'index.html');
+  const packageJsonDestPath = join(__dirname, 'test-project', 'package.json');
+  execSync(`cp ${cracoConfigPath} ${cracoConfigDestPath}`, { cwd: __dirname });
+  execSync(`cp ${indexPath} ${indexDestPath}`, { cwd: __dirname });
+  execSync(`cp ${htmlPath} ${htmlDestPath}`, { cwd: __dirname });
+  execSync(`cp ${packageJsonPath} ${packageJsonDestPath}`, { cwd: __dirname });
+
+  await new Promise(resolve => {setTimeout(resolve, 1000)});
+
+  execSync('npm install ../../../../../packages/craco', { cwd: join(__dirname, 'test-project') });
+
+  // Build the test project
+  execSync('npm run build', { cwd: join(__dirname, 'test-project'), stdio: 'inherit' });
+
+  // Start a local server to serve the test project
+  const server = spawn('npx', ['serve', '-s', 'build', '-l', PORT], {
+    cwd: join(__dirname, 'test-project'),
+  });
+
+  // Log any server errors to the console
+  server.stderr.on('data', (data) => {
+    console.error(`stderr: ${data}`);
+  });
+
+  // Leave time for the server to initialize
+  await new Promise(resolve => {setTimeout(resolve, 3000)}); 
+
+  // Go to the locally hosted site
+  await page.goto(URL);
+}, 60000);
+
+afterAll(() => {
+  // Stop the local server
+  execSync(`kill $(lsof -t -i:${PORT})`, { cwd: __dirname, stdio: 'ignore' });
+
+  // Delete the test project
+  execSync('rm -rf test-project', { cwd: __dirname });
+});
+
+test("Should have the expected styles", async () => {
+  await page.goto(URL, {'waitUntil':'domcontentloaded'});
+
+  const cracoTestText = await page.$eval('#craco-test', (element) => element.textContent);
+    expect(cracoTestText).toBe("CRACO is working!");
+
+});