引入 React（纯配置）

前面这几章讲的都是纯函数的测试，相对比较简单。而我们平常面对更多的是 React 和 Vue 的业务代码，对于这样的代码又该如何做测试呢？ 下面以 React 为例，继续我们的测试之旅。

::: tip 如果你的技术栈是 Vue 也没关系，本教程更多的是想分享 “测试思路”，无论你是用 Vue 还是 React，都能在后面的章节里学到一样的知识。 :::

::: warning 这一章主要是配置 React 开发环境，不涉及测试内容，所以跟着我的代码复制即可。 :::

配置 Webpack

可以不使用我下面的版本，不过最好保证 React 是 17 的，小于 17 太老，大于 17 又不太稳定。

  1. # Webpack 依赖
  2. npm i -D webpack@5.72.0 webpack-cli@4.9.2 webpack-dev-server@4.8.1 html-webpack-plugin@5.5.0
  4. # Loader
  5. npm i -D less@4.1.2 less-loader@10.2.0 style-loader@3.3.1 css-loader@6.7.1 ts-loader@9.2.8
  7. # React 以及业务
  8. npm i react@17.0.2 react-dom@17.0.2 axios@0.26.1 antd@4.19.5 classnames@2.3.1
  9. npm i -D @types/react@17.0.2 @types/react-dom@17.0.2

在根目录添加 Webpack 配置文件 webpack.config.js：

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. module.exports = {
  5.   mode: 'development',
  6.   entry: {
  7.     index: './src/index.tsx'
  8.   },
  9.   module: {
  10.     rules: [
  11.       // 解析 TypeScript
  12.       {
  13.         test: /\.(tsx?|jsx?)$/,
  14.         use: 'ts-loader',
  15.         exclude: /(node_modules|tests)/
  16.       },
  17.       // 解析 CSS
  18.       {
  19.         test: /\.css$/i,
  20.         use: [
  21.           { loader: 'style-loader' },
  22.           { loader: 'css-loader' },
  23.         ]
  24.       },
  25.       // 解析 Less
  26.       {
  27.         test: /\.less$/i,
  28.         use: [
  29.           { loader: "style-loader" },
  30.           {
  31.             loader: "css-loader",
  32.             options: {
  33.               modules: {
  34.                 mode: (resourcePath) => {
  35.                   if (/pure.css$/i.test(resourcePath)) {
  36.                     return "pure";
  37.                   }
  38.                   if (/global.css$/i.test(resourcePath)) {
  39.                     return "global";
  40.                   }
  41.                   return "local";
  42.                 },
  43.               }
  44.             }
  45.           },
  46.           { loader: "less-loader" },
  47.         ],
  48.       },
  49.     ],
  50.   },
  51.   resolve: {
  52.     extensions: ['.tsx', '.ts', '.js', '.less', 'css'],
  53.     // 设置别名
  54.     alias: {
  55.       utils: path.join(__dirname, 'src/utils/'),
  56.       components: path.join(__dirname, 'src/components/'),
  57.       apis: path.join(__dirname, 'src/apis/'),
  58.       hooks: path.join(__dirname, 'src/hooks/'),
  59.       store: path.join(__dirname, 'src/store/'),
  60.     }
  61.   },
  62.   devtool: 'inline-source-map',
  63.   // 3000 端口打开网页
  64.   devServer: {
  65.     static: './dist',
  66.     port: 3000,
  67.     hot: true,
  68.   },
  69.   // 默认输出
  70.   output: {
  71.     filename: 'index.js',
  72.     path: path.resolve(__dirname, 'dist'),
  73.     clean: true,
  74.   },
  75.   // 指定模板 html
  76.   plugins: [
  77.     new HtmlWebpackPlugin({
  78.       template: './public/index.html',
  79.     }),
  80.   ],
  81. };

在 public/index.html 添加模板 HTML 文件：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>React App</title>
  6. </head>
  7. <body>
  8.     <div id="root"></div>
  9. </body>
  10. </html>

在 package.json 添加启动命令：

  1. {
  2.   "scripts": {
  3.     "start": "webpack serve",
  4.     "test": "jest"
  5.   }
  6. }

添加入口

现在来实现我们的 React App。在 src/index.tsx 添加入口：

  1. import React from "react";
  2. import ReactDOM from "react-dom";
  3. import App from "./App";
  4. import "antd/dist/antd.css";
  6. ReactDOM.render(<App />, document.querySelector("#root"));

添加 src/App.tsx 根组件：

  1. import React from 'react';
  2. import { Button } from 'antd';
  4. const App = () => {
  5.   return (
  6.     <div>
  7.       <h1>Hello</h1>
  8.       <Button>点我</Button>
  9.     </div>
  10.   )
  11. }
  13. export default App;

到这里我们的业务就完事了，接下来再配置一下 tsconfig.json，所需要用的路径都做一下映射：

  1. {
  2.   "compilerOptions": {
  3.     "jsx": "react",
  4.     "baseUrl": "./",
  5.     "paths": {
  6.       "utils/*": ["src/utils/*"],
  7.       "components/*": ["src/components/*"],
  8.       "apis/*": ["src/apis/*"],
  9.       "hooks/*": ["src/hooks/*"],
  10.       "store/*": ["src/store/*"]
  11.     } 
  12.   }
  13. }

启动应用

现在执行 npm run start，进入 localhost:3000 就能看到我们的页面了：

引入 React（纯配置） - 图1