From bbe7d59d6f0f1be11425a9c51e31309f47bf8dde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Allen=20Zhang=20=28=E5=BC=A0=E6=B6=9B=29?=
 <wr_zhang25@163.com>
Date: Mon, 4 Mar 2024 19:43:47 +0800
Subject: [PATCH] feat: add test

---
 examples/playwright-test/.gitignore           |  3 +
 examples/playwright-test/main.js              | 19 ++++++
 examples/playwright-test/package.json         | 15 +++++
 examples/todomvc-react/.eslintrc              | 13 ++++
 examples/todomvc-react/.gitignore             |  3 +
 examples/todomvc-react/babel.config.js        |  3 +
 examples/todomvc-react/package.json           | 42 ++++++++++++
 examples/todomvc-react/public/index.html      | 18 ++++++
 examples/todomvc-react/src/index.js           | 15 +++++
 examples/todomvc-react/src/todo/app.css       | 24 +++++++
 examples/todomvc-react/src/todo/app.jsx       | 20 ++++++
 .../src/todo/components/footer.jsx            | 43 +++++++++++++
 .../src/todo/components/header.jsx            | 15 +++++
 .../src/todo/components/input.jsx             | 49 ++++++++++++++
 .../src/todo/components/item.jsx              | 53 +++++++++++++++
 .../src/todo/components/main.jsx              | 45 +++++++++++++
 examples/todomvc-react/src/todo/constants.js  |  7 ++
 examples/todomvc-react/src/todo/reducer.js    | 64 +++++++++++++++++++
 examples/todomvc-react/webpack.common.js      | 43 +++++++++++++
 examples/todomvc-react/webpack.dev.js         | 18 ++++++
 examples/todomvc-react/webpack.prod.js        | 30 +++++++++
 21 files changed, 542 insertions(+)
 create mode 100644 examples/playwright-test/.gitignore
 create mode 100644 examples/playwright-test/main.js
 create mode 100644 examples/playwright-test/package.json
 create mode 100644 examples/todomvc-react/.eslintrc
 create mode 100644 examples/todomvc-react/.gitignore
 create mode 100644 examples/todomvc-react/babel.config.js
 create mode 100755 examples/todomvc-react/package.json
 create mode 100644 examples/todomvc-react/public/index.html
 create mode 100644 examples/todomvc-react/src/index.js
 create mode 100644 examples/todomvc-react/src/todo/app.css
 create mode 100644 examples/todomvc-react/src/todo/app.jsx
 create mode 100644 examples/todomvc-react/src/todo/components/footer.jsx
 create mode 100644 examples/todomvc-react/src/todo/components/header.jsx
 create mode 100644 examples/todomvc-react/src/todo/components/input.jsx
 create mode 100644 examples/todomvc-react/src/todo/components/item.jsx
 create mode 100644 examples/todomvc-react/src/todo/components/main.jsx
 create mode 100644 examples/todomvc-react/src/todo/constants.js
 create mode 100644 examples/todomvc-react/src/todo/reducer.js
 create mode 100644 examples/todomvc-react/webpack.common.js
 create mode 100644 examples/todomvc-react/webpack.dev.js
 create mode 100644 examples/todomvc-react/webpack.prod.js

diff --git a/examples/playwright-test/.gitignore b/examples/playwright-test/.gitignore
new file mode 100644
index 00000000..67f66f2e
--- /dev/null
+++ b/examples/playwright-test/.gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+/node_modules
+package-lock.json
diff --git a/examples/playwright-test/main.js b/examples/playwright-test/main.js
new file mode 100644
index 00000000..80d50683
--- /dev/null
+++ b/examples/playwright-test/main.js
@@ -0,0 +1,19 @@
+const {chromium} = require('playwright');
+const main = async () => {
+  const browser = await chromium.launch()
+  const page = await browser.newPage();
+  // 进入被测页面
+  await page.goto('http://test.com')
+  // 执行测试用例
+  // 用例1
+  await page.click('button')
+  // 用例2
+  await page.fill('input', 'test')
+  // 用例3
+  await page.click('text=submit')
+  const coverage = await page.evaluate(`window.__coverage__`)
+  console.log(coverage)
+  browser.close()
+}
+
+main()
diff --git a/examples/playwright-test/package.json b/examples/playwright-test/package.json
new file mode 100644
index 00000000..26f08bdf
--- /dev/null
+++ b/examples/playwright-test/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "play-write",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node ./main.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "playwright": "^1.42.1"
+  }
+}
diff --git a/examples/todomvc-react/.eslintrc b/examples/todomvc-react/.eslintrc
new file mode 100644
index 00000000..0ce034b4
--- /dev/null
+++ b/examples/todomvc-react/.eslintrc
@@ -0,0 +1,13 @@
+{
+    "extends": ["eslint:recommended", "plugin:react/recommended"],
+    "settings": {
+        "react": {
+            "version": "17.0.2"
+        }
+    },
+    "rules": {
+        "no-extra-parens": 0,
+        "react/prop-types": 0,
+        "react/react-in-jsx-scope": 0
+    }
+}
diff --git a/examples/todomvc-react/.gitignore b/examples/todomvc-react/.gitignore
new file mode 100644
index 00000000..67f66f2e
--- /dev/null
+++ b/examples/todomvc-react/.gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+/node_modules
+package-lock.json
diff --git a/examples/todomvc-react/babel.config.js b/examples/todomvc-react/babel.config.js
new file mode 100644
index 00000000..0d39533c
--- /dev/null
+++ b/examples/todomvc-react/babel.config.js
@@ -0,0 +1,3 @@
+module.exports={
+	plugins: ['istanbul']
+}
diff --git a/examples/todomvc-react/package.json b/examples/todomvc-react/package.json
new file mode 100755
index 00000000..14e8fad3
--- /dev/null
+++ b/examples/todomvc-react/package.json
@@ -0,0 +1,42 @@
+{
+    "name": "todomvc-react",
+    "version": "1.0.0",
+    "description": "A TodoMVC written in React.",
+    "private": true,
+    "engines": {
+        "node": ">=18.13.0",
+        "npm": ">=8.19.3"
+    },
+    "scripts": {
+        "build": "webpack --config webpack.prod.js",
+        "dev": "webpack serve --open --config webpack.dev.js",
+        "serve": "http-server ./dist -p 7002 -c-1 --cors",
+        "test": "jest"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.24.0",
+        "@babel/preset-env": "^7.24.0",
+        "@babel/preset-react": "^7.23.3",
+        "babel-loader": "^9.1.3",
+        "babel-plugin-istanbul": "^6.1.1",
+        "css-loader": "^6.10.0",
+        "css-minimizer-webpack-plugin": "^4.2.2",
+        "eslint-plugin-react": "^7.34.0",
+        "html-webpack-plugin": "^5.6.0",
+        "http-server": "^14.1.1",
+        "mini-css-extract-plugin": "^2.8.1",
+        "style-loader": "^3.3.4",
+        "webpack": "^5.90.3",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^4.15.1",
+        "webpack-merge": "^5.10.0"
+    },
+    "dependencies": {
+        "classnames": "^2.5.1",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-router-dom": "^6.22.2",
+        "todomvc-app-css": "^2.4.3",
+        "todomvc-common": "^1.0.5"
+    }
+}
diff --git a/examples/todomvc-react/public/index.html b/examples/todomvc-react/public/index.html
new file mode 100644
index 00000000..ca4cc7a7
--- /dev/null
+++ b/examples/todomvc-react/public/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" data-framework="react">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="description" content="A TodoMVC written in React." />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>TodoMVC: React</title>
+    </head>
+    <body>
+        <section class="todoapp" id="root"></section>
+        <footer class="info">
+            <p>Double-click to edit a todo</p>
+			<p>Created by the TodoMVC Team</p>
+			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+        </footer>
+    </body>
+</html>
diff --git a/examples/todomvc-react/src/index.js b/examples/todomvc-react/src/index.js
new file mode 100644
index 00000000..9c929424
--- /dev/null
+++ b/examples/todomvc-react/src/index.js
@@ -0,0 +1,15 @@
+import React from "react";
+import { render } from "react-dom";
+import { HashRouter, Route, Routes } from "react-router-dom";
+
+import { App } from "./todo/app";
+import "todomvc-app-css/index.css";
+
+render(
+    <HashRouter>
+        <Routes>
+            <Route path="*" element={<App />} />
+        </Routes>
+    </HashRouter>,
+    document.getElementById("root")
+);
diff --git a/examples/todomvc-react/src/todo/app.css b/examples/todomvc-react/src/todo/app.css
new file mode 100644
index 00000000..bfa6617e
--- /dev/null
+++ b/examples/todomvc-react/src/todo/app.css
@@ -0,0 +1,24 @@
+/* used for things that should be hidden in the ui,
+but useful for people who use screen readers */
+.visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+}
+
+.toggle-all {
+    width: 40px !important;
+    height: 60px !important;
+    right: auto !important;
+}
+
+.toggle-all-label {
+    pointer-events: none;
+}
diff --git a/examples/todomvc-react/src/todo/app.jsx b/examples/todomvc-react/src/todo/app.jsx
new file mode 100644
index 00000000..4ae2b60d
--- /dev/null
+++ b/examples/todomvc-react/src/todo/app.jsx
@@ -0,0 +1,20 @@
+import { useReducer } from "react";
+import { Header } from "./components/header";
+import { Main } from "./components/main";
+import { Footer } from "./components/footer";
+
+import { todoReducer } from "./reducer";
+
+import "./app.css";
+
+export function App() {
+    const [todos, dispatch] = useReducer(todoReducer, []);
+
+    return (
+        <>
+            <Header dispatch={dispatch} />
+            <Main todos={todos} dispatch={dispatch} />
+            <Footer todos={todos} dispatch={dispatch} />
+        </>
+    );
+}
diff --git a/examples/todomvc-react/src/todo/components/footer.jsx b/examples/todomvc-react/src/todo/components/footer.jsx
new file mode 100644
index 00000000..c2c3befc
--- /dev/null
+++ b/examples/todomvc-react/src/todo/components/footer.jsx
@@ -0,0 +1,43 @@
+import { useCallback, useMemo } from "react";
+import { useLocation } from "react-router-dom";
+import classnames from "classnames";
+
+import { REMOVE_COMPLETED_ITEMS } from "../constants";
+
+export function Footer({ todos, dispatch }) {
+    const { pathname: route } = useLocation();
+
+    const activeTodos = useMemo(() => todos.filter((todo) => !todo.completed), [todos]);
+
+    const removeCompleted = useCallback(() => dispatch({ type: REMOVE_COMPLETED_ITEMS }), [dispatch]);
+
+    // prettier-ignore
+    if (todos.length === 0)
+        return null;
+
+    return (
+        <footer className="footer" data-testid="footer">
+            <span className="todo-count">{`${activeTodos.length} ${activeTodos.length === 1 ? "item" : "items"} left!`}</span>
+            <ul className="filters" data-testid="footer-navigation">
+                <li>
+                    <a className={classnames({ selected: route === "/" })} href="#/">
+                        All
+                    </a>
+                </li>
+                <li>
+                    <a className={classnames({ selected: route === "/active" })} href="#/active">
+                        Active
+                    </a>
+                </li>
+                <li>
+                    <a className={classnames({ selected: route === "/completed" })} href="#/completed">
+                        Completed
+                    </a>
+                </li>
+            </ul>
+            <button className="clear-completed" disabled={activeTodos.length === todos.length} onClick={removeCompleted}>
+                Clear completed
+            </button>
+        </footer>
+    );
+}
diff --git a/examples/todomvc-react/src/todo/components/header.jsx b/examples/todomvc-react/src/todo/components/header.jsx
new file mode 100644
index 00000000..866d2bf9
--- /dev/null
+++ b/examples/todomvc-react/src/todo/components/header.jsx
@@ -0,0 +1,15 @@
+import { useCallback } from "react";
+import { Input } from "./input";
+
+import { ADD_ITEM } from "../constants";
+
+export function Header({ dispatch }) {
+    const addItem = useCallback((title) => dispatch({ type: ADD_ITEM, payload: { title } }), [dispatch]);
+
+    return (
+        <header className="header" data-testid="header">
+            <h1>todos</h1>
+            <Input onSubmit={addItem} label="New Todo Input" placeholder="What needs to be done?" />
+        </header>
+    );
+}
diff --git a/examples/todomvc-react/src/todo/components/input.jsx b/examples/todomvc-react/src/todo/components/input.jsx
new file mode 100644
index 00000000..a386c58c
--- /dev/null
+++ b/examples/todomvc-react/src/todo/components/input.jsx
@@ -0,0 +1,49 @@
+import { useCallback } from "react";
+
+const sanitize = (string) => {
+    const map = {
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#x27;",
+        "/": "&#x2F;",
+    };
+    const reg = /[&<>"'/]/gi;
+    return string.replace(reg, (match) => map[match]);
+};
+
+const hasValidMin = (value, min) => {
+    return value.length >= min;
+};
+
+export function Input({ onSubmit, placeholder, label, defaultValue, onBlur }) {
+    const handleBlur = useCallback(() => {
+        if (onBlur)
+            onBlur();
+    }, [onBlur]);
+
+    const handleKeyDown = useCallback(
+        (e) => {
+            if (e.key === "Enter") {
+                const value = e.target.value.trim();
+
+                if (!hasValidMin(value, 2))
+                    return;
+
+                onSubmit(sanitize(value));
+                e.target.value = "";
+            }
+        },
+        [onSubmit]
+    );
+
+    return (
+        <div className="input-container">
+            <input className="new-todo" id="todo-input" type="text" data-testid="text-input" autoFocus placeholder={placeholder} defaultValue={defaultValue} onBlur={handleBlur} onKeyDown={handleKeyDown} />
+            <label className="visually-hidden" htmlFor="todo-input">
+                {label}
+            </label>
+        </div>
+    );
+}
diff --git a/examples/todomvc-react/src/todo/components/item.jsx b/examples/todomvc-react/src/todo/components/item.jsx
new file mode 100644
index 00000000..d7aa7363
--- /dev/null
+++ b/examples/todomvc-react/src/todo/components/item.jsx
@@ -0,0 +1,53 @@
+import { memo, useState, useCallback } from "react";
+import classnames from "classnames";
+
+import { Input } from "./input";
+
+import { TOGGLE_ITEM, REMOVE_ITEM, UPDATE_ITEM } from "../constants";
+
+export const Item = memo(function Item({ todo, dispatch, index }) {
+    const [isWritable, setIsWritable] = useState(false);
+    const { title, completed, id } = todo;
+
+    const toggleItem = useCallback(() => dispatch({ type: TOGGLE_ITEM, payload: { id } }), [dispatch]);
+    const removeItem = useCallback(() => dispatch({ type: REMOVE_ITEM, payload: { id } }), [dispatch]);
+    const updateItem = useCallback((id, title) => dispatch({ type: UPDATE_ITEM, payload: { id, title } }), [dispatch]);
+
+    const handleDoubleClick = useCallback(() => {
+        setIsWritable(true);
+    }, []);
+
+    const handleBlur = useCallback(() => {
+        setIsWritable(false);
+    }, []);
+
+    const handleUpdate = useCallback(
+        (title) => {
+            if (title.length === 0)
+                removeItem(id);
+            else
+                updateItem(id, title);
+
+            setIsWritable(false);
+        },
+        [id, removeItem, updateItem]
+    );
+
+    return (
+        <li className={classnames({ completed: todo.completed })} data-testid="todo-item">
+            <div className="view">
+                {isWritable ? (
+                    <Input onSubmit={handleUpdate} label="Edit Todo Input" defaultValue={title} onBlur={handleBlur} />
+                ) : (
+                    <>
+                        <input className="toggle" type="checkbox" data-testid="todo-item-toggle" checked={completed} onChange={toggleItem} />
+                        <label data-testid="todo-item-label" onDoubleClick={handleDoubleClick}>
+                            {title}
+                        </label>
+                        <button className="destroy" data-testid="todo-item-button" onClick={removeItem} />
+                    </>
+                )}
+            </div>
+        </li>
+    );
+});
diff --git a/examples/todomvc-react/src/todo/components/main.jsx b/examples/todomvc-react/src/todo/components/main.jsx
new file mode 100644
index 00000000..77c02d68
--- /dev/null
+++ b/examples/todomvc-react/src/todo/components/main.jsx
@@ -0,0 +1,45 @@
+import { useMemo, useCallback } from "react";
+import { useLocation } from "react-router-dom";
+
+import { Item } from "./item";
+import classnames from "classnames";
+
+import { TOGGLE_ALL } from "../constants";
+
+export function Main({ todos, dispatch }) {
+    const { pathname: route } = useLocation();
+
+    const visibleTodos = useMemo(
+        () =>
+            todos.filter((todo) => {
+                if (route === "/active")
+                    return !todo.completed;
+
+                if (route === "/completed")
+                    return todo.completed;
+
+                return todo;
+            }),
+        [todos, route]
+    );
+
+    const toggleAll = useCallback((e) => dispatch({ type: TOGGLE_ALL, payload: { completed: e.target.checked } }), [dispatch]);
+
+    return (
+        <main className="main" data-testid="main">
+            {visibleTodos.length > 0 ? (
+                <div className="toggle-all-container">
+                    <input className="toggle-all" type="checkbox" data-testid="toggle-all" checked={visibleTodos.every((todo) => todo.completed)} onChange={toggleAll} />
+                    <label className="toggle-all-label" htmlFor="toggle-all">
+                        Toggle All Input
+                    </label>
+                </div>
+            ) : null}
+            <ul className={classnames("todo-list")} data-testid="todo-list">
+                {visibleTodos.map((todo, index) => (
+                    <Item todo={todo} key={todo.id} dispatch={dispatch} index={index} />
+                ))}
+            </ul>
+        </main>
+    );
+}
diff --git a/examples/todomvc-react/src/todo/constants.js b/examples/todomvc-react/src/todo/constants.js
new file mode 100644
index 00000000..cb019df4
--- /dev/null
+++ b/examples/todomvc-react/src/todo/constants.js
@@ -0,0 +1,7 @@
+export const ADD_ITEM = "ADD_ITEM";
+export const UPDATE_ITEM = "UPDATE_ITEM";
+export const REMOVE_ITEM = "REMOVE_ITEM";
+export const TOGGLE_ITEM = "TOGGLE_ITEM";
+export const REMOVE_ALL_ITEMS = "REMOVE_ALL_ITEMS";
+export const TOGGLE_ALL = "TOGGLE_ALL";
+export const REMOVE_COMPLETED_ITEMS = "REMOVE_COMPLETED_ITEMS";
diff --git a/examples/todomvc-react/src/todo/reducer.js b/examples/todomvc-react/src/todo/reducer.js
new file mode 100644
index 00000000..b43c3583
--- /dev/null
+++ b/examples/todomvc-react/src/todo/reducer.js
@@ -0,0 +1,64 @@
+import { ADD_ITEM, UPDATE_ITEM, REMOVE_ITEM, TOGGLE_ITEM, REMOVE_ALL_ITEMS, TOGGLE_ALL, REMOVE_COMPLETED_ITEMS } from "./constants";
+
+/* Borrowed from https://github.com/ai/nanoid/blob/3.0.2/non-secure/index.js
+
+The MIT License (MIT)
+
+Copyright 2017 Andrey Sitnik <andrey@sitnik.ru>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */
+
+// This alphabet uses `A-Za-z0-9_-` symbols.
+// The order of characters is optimized for better gzip and brotli compression.
+// References to the same file (works both for gzip and brotli):
+// `'use`, `andom`, and `rict'`
+// References to the brotli default dictionary:
+// `-26T`, `1983`, `40px`, `75px`, `bush`, `jack`, `mind`, `very`, and `wolf`
+let urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+
+function nanoid(size = 21) {
+    let id = "";
+    // A compact alternative for `for (var i = 0; i < step; i++)`.
+    let i = size;
+    while (i--) {
+        // `| 0` is more compact and faster than `Math.floor()`.
+        id += urlAlphabet[(Math.random() * 64) | 0];
+    }
+    return id;
+}
+
+export const todoReducer = (state, action) => {
+    switch (action.type) {
+        case ADD_ITEM:
+            return state.concat({ id: nanoid(), title: action.payload.title, completed: false });
+        case UPDATE_ITEM:
+            return state.map((todo) => (todo.id === action.payload.id ? { ...todo, title: action.payload.title } : todo));
+        case REMOVE_ITEM:
+            return state.filter((todo) => todo.id !== action.payload.id);
+        case TOGGLE_ITEM:
+            return state.map((todo) => (todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo));
+        case REMOVE_ALL_ITEMS:
+            return [];
+        case TOGGLE_ALL:
+            return state.map((todo) => (todo.completed !== action.payload.completed ? { ...todo, completed: action.payload.completed } : todo));
+        case REMOVE_COMPLETED_ITEMS:
+            return state.filter((todo) => !todo.completed);
+    }
+
+    throw Error(`Unknown action: ${action.type}`);
+};
diff --git a/examples/todomvc-react/webpack.common.js b/examples/todomvc-react/webpack.common.js
new file mode 100644
index 00000000..ed3adfe9
--- /dev/null
+++ b/examples/todomvc-react/webpack.common.js
@@ -0,0 +1,43 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+
+module.exports = {
+    entry: {
+        app: path.resolve(__dirname, "src", "index.js"),
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: "TodoMVC: React",
+            template: path.resolve(__dirname, "public", "index.html"),
+        }),
+    ],
+    output: {
+        filename: "[name].bundle.js",
+        path: path.resolve(__dirname, "dist"),
+        clean: true,
+    },
+    resolve: {
+        extensions: [".js", ".jsx"],
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx)$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: [
+                            ["@babel/preset-env", { targets: "defaults" }],
+                            ["@babel/preset-react", { runtime: "automatic" }],
+                        ],
+                    },
+                },
+            },
+            {
+                test: /\.(png|svg|jpg|jpeg|gif)$/i,
+                type: "asset/resource",
+            },
+        ],
+    },
+};
diff --git a/examples/todomvc-react/webpack.dev.js b/examples/todomvc-react/webpack.dev.js
new file mode 100644
index 00000000..774d0558
--- /dev/null
+++ b/examples/todomvc-react/webpack.dev.js
@@ -0,0 +1,18 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    mode: "development",
+    devtool: "inline-source-map",
+    devServer: {
+        static: "./dist",
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/i,
+                use: ["style-loader", "css-loader"],
+            },
+        ],
+    },
+});
diff --git a/examples/todomvc-react/webpack.prod.js b/examples/todomvc-react/webpack.prod.js
new file mode 100644
index 00000000..b037045c
--- /dev/null
+++ b/examples/todomvc-react/webpack.prod.js
@@ -0,0 +1,30 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+
+const TerserPlugin = require("terser-webpack-plugin");
+
+module.exports = merge(common, {
+    mode: "production",
+    devtool: "source-map",
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: "[name].css",
+            chunkFilename: "[id].css",
+        }),
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                use: [MiniCssExtractPlugin.loader, "css-loader"],
+            },
+        ],
+    },
+    optimization: {
+        minimize: true,
+        minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
+    },
+});