"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", div: "div", h2: "h2", h3: "h3", hr: "hr", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {Admonition, R2Image} = _components; if (!Admonition) _missingMdxReference("Admonition", true); if (!R2Image) _missingMdxReference("R2Image", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["当一个项目规模达到一定程度之后，单靠开发人员的“手工点一下”已经无法保证质量。一个人改了一行代码，可能影响到十个人正在开发的功能；一个看似无害的样式调整，可能让另一个页面的布局彻底崩溃。这时候，需要一套自动化的验证体系——", _jsx(_components.strong, { children: "测试" }), "。"] }), "\n", _jsxs(_components.p, { children: ["测试的意义正是在于：", _jsx(_components.strong, { children: "把假设变成可验证的断言" }), "。它逼你思考“这个函数到底应该接受什么、拒绝什么”，而不是只写完快乐路径就交差。当你为函数加上测试，覆盖正常值、边界值、异常值，你获得的不仅是覆盖率数字，更是", _jsx(_components.strong, { children: "改动代码时的底气" }), "——你可以放心重构，因为测试会告诉你哪里坏了。"] }), "\n", _jsxs(_components.p, { children: ["当测试完成之后，接下来就是怎么让用户用上。这就是", _jsx(_components.strong, { children: "部署" }), "。从本地 ", _jsx(_components.code, { children: "npm run build" }), " 到服务器上的 Nginx、Docker、K8s，从手动 ", _jsx(_components.code, { children: "scp" }), " 到 CI/CD 自动流水线，部署的复杂度随着项目规模指数级上升。这次我围绕测试和部署两大块来写，两个模块并最后结合CI/CD流程去做。本文jest测试以webpack+vue初始化项目去做demo，而vitest以vite去做。"] }), "\n", _jsxs(_components.h2, { id: "基础理论", children: ["基础理论", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#基础理论", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "前端测试部分有很多基础理论，比如配置静态代码规范、单元测试、端到端测试(e2e)以及数据mock、测试覆盖率等等。" }), "\n", _jsxs(_components.h3, { id: "代码规范", children: ["代码规范", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#代码规范", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["代码规范检查实际上很多人会归类于工程化的部分，市面上大部分公司都是玩的 ESLint + Prettier 这套组合。ESLint 负责检查代码质量（比如未使用的变量、隐式类型转换、潜在的 bug 模式），Prettier 负责统一代码风格（缩进、引号、分号、换行）。更近一步，可以用 ", _jsx(_components.code, { children: "lint-staged" }), " 配合 ", _jsx(_components.code, { children: "husky" }), "，在 Git 提交前自动对暂存文件执行检查和格式化，确保进入仓库的代码都是干净的。"] }), "\n", _jsx(_components.p, { children: "但是我目前的认知除了这一套以外，还有几种新兴方案：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Biome" }), "：用 Rust 写的统一工具链，集成了 Lint、Format、代码组织等功能，速度比 ESLint + Prettier 快几十倍，配置极简，但规则生态还在追赶中。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "@antfu/eslint-config" }), "：虽然底层仍是 ESLint，但它把大量优秀规则打包成一个预设，通过 ", _jsx(_components.code, { children: "pnpm dlx" }), " 一键安装，省去繁琐配置，相当于“开箱即用的最佳实践合集”。"] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "tdd与bdd", children: ["TDD与BDD", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#tdd与bdd", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "TDD（Test-Driven Development，测试驱动开发）和 BDD（Behavior-Driven Development，行为驱动开发）是两种编写测试和驱动代码设计的方法论，它们关注的侧重点不同。" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "简单来说TDD是先写测试后写代码，而BDD是业务行为出发，思维方向相反" }), "\n", _jsxs(_components.li, { children: ["TDD以", _jsx(_components.code, { children: "红 ->绿->重构" }), "的方向动手，先想清楚“这个函数应该输入什么、输出什么、边界条件是什么”。它的产物是一组", _jsx(_components.strong, { children: "单元测试" }), "，通常细粒度较高。"] }), "\n"] }), "\n", _jsx(Admonition, { type: "note", children: _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["1.", _jsx(_components.strong, { children: "红" }), "：先写一个失败的测试。2. ", _jsx(_components.strong, { children: "绿" }), "：写刚好能让测试通过的最简代码。3. ", _jsx(_components.strong, { children: "重构" }), "：优化代码结构，保持测试全绿。"] }), "\n"] }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["BDD 更关注", _jsx(_components.strong, { children: "系统的行为" }), "，用自然语言描述“当用户做什么时，系统应该怎样响应”。例如：用 TDD 测试一个日期格式化工具函数，用 BDD 测试“用户从登录到下单”的完整流程。"] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "单元与e2e测试", children: ["单元与e2e测试", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#单元与e2e测试", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["单元测试针对的是函数、组件、模块等独立单元，不依赖外部环境（网络、数据库、DOM 等）。通常在开发过程中同步编写，遵循 TDD 或先实现后补测都可以。它的特点是 ", _jsx(_components.strong, { children: "快、稳定、定位精准" }), "。E2E 测试启动真实的浏览器（或模拟环境），像真实用户一样点击、输入、跳转页面，验证整个流程是否通畅。它的特点是 ", _jsx(_components.strong, { children: "真实、可靠，但较慢、脆弱" }), "（容易因 DOM 结构调整而失败）。"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "单元测试" }), "常用工具：Vitest / Jest（测试框架），配合 Testing Library（React Testing Library、Vue Test Utils）。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "e2e测试" }), "常用工具：Playwright、Cypress。"] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "mock与测试覆盖率", children: ["mock与测试覆盖率", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mock与测试覆盖率", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "在单元测试中，一个函数可能依赖网络请求、localStorage、日期时间、其他模块等。为了只测试当前单元的逻辑，需要用 mock 替换掉这些外部依赖。" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Vitest / Jest 提供 ", _jsx(_components.code, { children: "vi.mock" }), " / ", _jsx(_components.code, { children: "jest.mock" }), " 自动模拟模块。"] }), "\n", _jsxs(_components.li, { children: ["手动模拟函数：", _jsx(_components.code, { children: "vi.fn()" }), " 替代真实实现。"] }), "\n", _jsxs(_components.li, { children: ["模拟时间：", _jsx(_components.code, { children: "vi.setSystemTime" }), "。"] }), "\n", _jsxs(_components.li, { children: ["模拟全局对象：", _jsx(_components.code, { children: "global.fetch = vi.fn()" }), "。"] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, { children: "覆盖率工具会分析哪些代码在测试运行时被执行了，哪些没执行。常见的四个维度：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "行覆盖率" }), "：多少行代码被测试执行过。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "语句覆盖率" }), "：类似行覆盖，但更精确。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "函数覆盖率" }), "：多少函数被调用过。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "分支覆盖率" }), "：每个 ", _jsx(_components.code, { children: "if" }), " / ", _jsx(_components.code, { children: "else" }), " / ", _jsx(_components.code, { children: "switch" }), " 分支是否都被覆盖。"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["工具如 Vitest 内置 ", _jsx(_components.code, { children: "--coverage" }), "，Jest 配合 ", _jsx(_components.code, { children: "istanbul" }), "。通常我们会设一个阈值（如 80%），低于阈值则 CI 失败。"] }), "\n", _jsxs(_components.h2, { id: "静态代码规范", children: ["静态代码规范", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#静态代码规范", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["静态代码规范在之前提到过目前了解的三种方式，当然还有很多其它的方式比如", _jsx(_components.strong, { children: "oxlint" }), "之类的，不过用的不多，就不阐述了。所以还是说一说这三种方法："] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "ESLint + Prettier" }), "：基于", _jsx(_components.strong, { children: "Nodejs" }), "写的，功能最全面，生态强大。优势是插件生态最丰富，自由度极高。缺点是配置繁琐，依赖庞杂，速度慢。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "@antfu/eslint-config" }), "：同样基于", _jsx(_components.strong, { children: "Nodejs" }), "编写，是前者的最佳实践集合。优点是", _jsx(_components.strong, { children: "配置极简" }), "，单依赖，集成最佳实践，提升效率。缺点同样是速度慢。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Biome" }), "：基于", _jsx(_components.strong, { children: "Rust" }), "编写，这个语言一出，速度无可厚非，其内置代码格式化，性能极强。缺点是起步较晚，插件生态和规则丰富度尚在发展中，对部分框架/文件支持有限。"] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "eslintprettier组合", children: ["ESLint+Prettier组合", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#eslintprettier组合", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "ESLint+Prettier" }), "这一套可以说是老相识了，很多公司都会用这玩意，首先是安装依赖。"] }), "\n", _jsx(Admonition, { type: "note", title: "目前eslint9推荐使用antfu去安装，不过很多项目估计还是eslint之前的版本" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// vue" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["pnpm add ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token constant", children: "D" }), " eslint prettier ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "eslint" })] }), _jsx(_components.span, { className: "token operator", children: "/" }), "js typescript", _jsx(_components.span, { className: "token operator", children: "-" }), "eslint \n"] }), _jsxs(_components.span, { className: "code-line", children: ["eslint", _jsx(_components.span, { className: "token operator", children: "-" }), "plugin", _jsx(_components.span, { className: "token operator", children: "-" }), "vue eslint", _jsx(_components.span, { className: "token operator", children: "-" }), "config", _jsx(_components.span, { className: "token operator", children: "-" }), "prettier eslint", _jsx(_components.span, { className: "token operator", children: "-" }), "plugin", _jsx(_components.span, { className: "token operator", children: "-" }), "prettier \n"] }), _jsxs(_components.span, { className: "code-line", children: ["globals eslint", _jsx(_components.span, { className: "token operator", children: "-" }), "plugin", _jsx(_components.span, { className: "token operator", children: "-" }), "perfectionist eslint", _jsx(_components.span, { className: "token operator", children: "-" }), "plugin", _jsx(_components.span, { className: "token operator", children: "-" }), "unused", _jsx(_components.span, { className: "token operator", children: "-" }), "imports\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "antfu" })] }), _jsx(_components.span, { className: "token operator", children: "/" }), "eslint", _jsx(_components.span, { className: "token operator", children: "-" }), "config\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["react版本和vue版本都需要安装plugin，而react多了一个", _jsx(_components.code, { children: "eslint-plugin-react-hooks" }), "。"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// react" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["pnpm add ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token constant", children: "D" }), " eslint prettier ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "eslint" })] }), _jsx(_components.span, { className: "token operator", children: "/" }), "js typescript", _jsx(_components.span, { className: "token operator", children: "-" }), "eslint \n"] }), _jsxs(_components.span, { className: "code-line", children: ["eslint", _jsx(_components.span, { className: "token operator", children: "-" }), "plugin", _jsx(_components.span, { className: "token operator", children: "-" }), "react eslint", _jsx(_components.span, { className: "token operator", children: "-" }), "plugin", _jsx(_components.span, { className: "token operator", children: "-" }), "react", _jsx(_components.span, { className: "token operator", children: "-" }), "hooks ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "antfu" })] }), _jsx(_components.span, { className: "token operator", children: "/" }), "eslint", _jsx(_components.span, { className: "token operator", children: "-" }), "config\n"] }), _jsxs(_components.span, { className: "code-line", children: ["eslint", _jsx(_components.span, { className: "token operator", children: "-" }), "config", _jsx(_components.span, { className: "token operator", children: "-" }), "prettier eslint", _jsx(_components.span, { className: "token operator", children: "-" }), "plugin", _jsx(_components.span, { className: "token operator", children: "-" }), "prettier \n"] }), _jsxs(_components.span, { className: "code-line", children: ["globals eslint", _jsx(_components.span, { className: "token operator", children: "-" }), "plugin", _jsx(_components.span, { className: "token operator", children: "-" }), "perfectionist eslint", _jsx(_components.span, { className: "token operator", children: "-" }), "plugin", _jsx(_components.span, { className: "token operator", children: "-" }), "unused", _jsx(_components.span, { className: "token operator", children: "-" }), "imports\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["其中 ", _jsx(_components.code, { children: "eslint-plugin-prettier" }), "可以不需要，很可能导致速度变慢"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "eslint-plugin-perfectionist" }), "用来自动排序import"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "eslint-plugin-unused-imports" }), "自动删除未使用的导入"] }), "\n", _jsxs(_components.li, { children: ["最后可以使用", _jsx(_components.code, { children: "pnpm up --latest" }), "更新版本"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["然后是配置", _jsx(_components.code, { children: "eslint.config.mjs" })] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " antfu ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'@antfu/eslint-config'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " eslintConfigPrettier ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'eslint-config-prettier'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " perfectionist ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'eslint-plugin-perfectionist'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " eslintPluginPrettierRecommended ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'eslint-plugin-prettier/recommended'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " unusedImports ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'eslint-plugin-unused-imports'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "default" }), " ", _jsx(_components.span, { className: "token function", children: "antfu" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" react", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" typescript", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" stylistic", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" markdown", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" toml", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ignores", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'dist'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'node_modules'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'.history'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'pnpm-lock.yaml'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'package-lock.json'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" files", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'**/*.{ts,js}'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" languageOptions", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ecmaVersion", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'latest'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" rules", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'no-console'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'no-unused-vars'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'@typescript-eslint/no-unused-vars'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'ts/no-use-before-define'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'ts/strict-boolean-expressions'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'ts/no-unsafe-member-access'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'ts/no-unsafe-call'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'ts/no-unsafe-assignment'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'ts/no-unsafe-return'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'ts/no-unsafe-argument'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'ts/no-misused-promises'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'ts/no-floating-promises'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'node/prefer-global/process'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'node/prefer-global/buffer'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'import/no-named-default'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'jsdoc/check-param-names'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'perfectionist'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" rules", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'import/order'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'sort-imports'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'off'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'perfectionist/sort-imports'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" perfectionist", _jsx(_components.span, { className: "token punctuation", children: "." }), "configs", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'recommended-natural'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "rules", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'perfectionist/sort-imports'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'perfectionist/sort-exports'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" perfectionist", _jsx(_components.span, { className: "token punctuation", children: "." }), "configs", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'recommended-natural'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "rules", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'perfectionist/sort-exports'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'perfectionist/sort-named-imports'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" perfectionist", _jsx(_components.span, { className: "token punctuation", children: "." }), "configs", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'recommended-natural'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "rules", _jsx(_components.span, { className: "token punctuation", children: "[" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "'perfectionist/sort-named-imports'" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'perfectionist/sort-named-exports'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" perfectionist", _jsx(_components.span, { className: "token punctuation", children: "." }), "configs", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'recommended-natural'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "rules", _jsx(_components.span, { className: "token punctuation", children: "[" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "'perfectionist/sort-named-exports'" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" plugins", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'unused-imports'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " unusedImports", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" rules", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'unused-imports/no-unused-imports'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'error'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'unused-imports/no-unused-vars'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "'warn'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" vars", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'all'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" varsIgnorePattern", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'^_'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" args", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'after-used'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" argsIgnorePattern", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'^_'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" eslintConfigPrettier", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" eslintPluginPrettierRecommended", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.p, { children: ["再配置", _jsx(_components.code, { children: "prettierrc.mjs" })] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " config ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" singleQuote", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" trailingComma", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'all'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" printWidth", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" proseWrap", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'never'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" endOfLine", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'auto'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" semi", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" tabWidth", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "4" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" htmlWhitespaceSensitivity", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'strict'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "default" }), " config", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.p, { children: ["最后是配置prettier需要忽略的文件", _jsx(_components.code, { children: ".prettierignore" })] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsx(_components.span, { className: "code-line", children: "dist \n" }), _jsx(_components.span, { className: "code-line", children: "node_modules \n" }), _jsxs(_components.span, { className: "code-line", children: ["pnpm", _jsx(_components.span, { className: "token operator", children: "-" }), "lock", _jsx(_components.span, { className: "token punctuation", children: "." }), "yaml \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "package" }), _jsx(_components.span, { className: "token operator", children: "-" }), "lock", _jsx(_components.span, { className: "token punctuation", children: "." }), "json \n"] }), _jsxs(_components.span, { className: "code-line", children: ["yarn", _jsx(_components.span, { className: "token punctuation", children: "." }), "lock \n"] }), _jsx(_components.span, { className: "code-line", children: "docker \n" }), _jsxs(_components.span, { className: "code-line", children: ["Dockerfile", _jsx(_components.span, { className: "token operator", children: "*" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token constant", children: "LICENSE" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["yarn", _jsx(_components.span, { className: "token operator", children: "-" }), "error", _jsx(_components.span, { className: "token punctuation", children: "." }), "log \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), "history \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), "dockerignore \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), "DS_Store \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), "eslintignore \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), "editorconfig \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), "gitignore \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), "prettierignore \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), "eslintcache \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "*" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "lock \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "**" }), _jsx(_components.span, { className: "token comment", children: "/*.svg \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "**/" }), _jsx(_components.span, { className: "token operator", children: "*" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "md \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "**" }), _jsx(_components.span, { className: "token comment", children: "/*.svg \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "**/" }), _jsx(_components.span, { className: "token operator", children: "*" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "ejs \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "**" }), _jsx(_components.span, { className: "token comment", children: "/*.html \n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "**/" }), _jsx(_components.span, { className: "token operator", children: "*" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "png \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "**" }), _jsx(_components.span, { className: "token comment", children: "/*.toml\n" })] })] }) }) })] }), "\n", _jsxs(_components.p, { children: ["最后在", _jsx(_components.code, { children: "package.json" }), "加上如下，之后使用", _jsx(_components.code, { children: "pnpm lint" }), "命令即可。"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "json" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-json", children: _jsxs(_components.code, { className: "language-json code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token property", children: "\"scripts\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token property", children: "\"dev\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"vite\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token property", children: "\"build\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"vue-tsc -b && vite build\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "\"eslint \\\"{src,test}/**/*.{ts,vue,tsx}\\\" --fix\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 添加lint" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token property", children: "\"preview\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"vite preview\"" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "antfueslint-config", children: ["@antfu/eslint-config", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#antfueslint-config", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://www.npmjs.com/package/@antfu/eslint-config", rel: "nofollow", target: "_blank", children: "antfu" }), "方案的配置会简单许多，直接开始，直接原项目执行"] }), "\n", _jsx(Admonition, { type: "info", title: "注意如果是vite启动react项目，最好是把对应的eslint删完再整" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: ["pnpm dlx ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "antfu" })] }), _jsx(_components.span, { className: "token operator", children: "/" }), "eslint", _jsx(_components.span, { className: "token operator", children: "-" }), "config\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 配置到package.json" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token string-property property", children: "\"scripts\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"lint\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"eslint --fix ./src --ext .ts,.tsx,.vue\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.p, { children: ["之后会弹出一堆配置，如下，这里由于我没有使用", _jsx(_components.code, { children: "vscode" }), "所以没有选相关的"] }), "\n", _jsx(R2Image, { r2Key: "blog/test-and-deploy/1.png", alt: "1", className: "", caption: "" }), "\n", _jsxs(_components.p, { children: ["最后执行", _jsx(_components.code, { children: "pnpm lint" }), "即可完成eslint化。"] }), "\n", _jsxs(_components.h3, { id: "biome", children: ["Biome", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#biome", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://biome.nodejs.cn", rel: "nofollow", target: "_blank", children: "Biome" }), "作为新一代的lint工具，集性能与便利于一身，只是目前刚刚起步，社区不是很完善，但是如果是新项目，尝试一番也不是不可。但是目前biome对vue的支持不足，最好是在react项目中使用。"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: ["pnpm add ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token constant", children: "D" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token constant", children: "E" }), " ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "biomejs" })] }), _jsx(_components.span, { className: "token operator", children: "/" }), "biome\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 然后运行以下命令生成 `biome.json` 配置文件" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "pnpm exec biome init\n" })] }) }) })] }), "\n", _jsx(_components.p, { children: "然后是biome的配置，官方配置，翻译成中文：" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 格式化所有文件，并直接写入修改" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["pnpm exec biome format ", _jsx(_components.span, { className: "token operator", children: "--" }), "write\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 格式化指定的文件，并直接写入修改" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["pnpm exec biome format ", _jsx(_components.span, { className: "token operator", children: "--" }), "write ", _jsx(_components.span, { className: "token operator", children: "<" }), "files", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 对所有文件执行代码检查，并自动应用安全修复" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["pnpm exec biome lint ", _jsx(_components.span, { className: "token operator", children: "--" }), "write\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 对指定的文件执行代码检查并自动应用安全修复" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["pnpm exec biome lint ", _jsx(_components.span, { className: "token operator", children: "--" }), "write ", _jsx(_components.span, { className: "token operator", children: "<" }), "files", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 对所有文件执行完整检查：包括格式化、代码检查、导入语句排序" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 并自动应用所有可自动修复的问题。" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["pnpm exec biome check ", _jsx(_components.span, { className: "token operator", children: "--" }), "write\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 对**指定的文件**执行完整检查并自动应用修改" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["pnpm exec biome check ", _jsx(_components.span, { className: "token operator", children: "--" }), "write ", _jsx(_components.span, { className: "token operator", children: "<" }), "files", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.p, { children: ["所以一般使用 ", _jsx(_components.code, { children: "pnpm exec biome check --write ./src" }), "即可"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "json" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-json", children: _jsxs(_components.code, { className: "language-json code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token property", children: "\"scripts\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token property", children: "\"lint\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"biome check --write ./src\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h2, { id: "jest单元测试", children: ["jest单元测试", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#jest单元测试", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://www.jestjs.cn", rel: "nofollow", target: "_blank", children: "jest" }), "算是一个老牌的测试方案了，但是一般用来测试webpack项目，如果是vue3或者react项目，现在很多时候大概率使用vite进行构建，则推荐使用", _jsx(_components.a, { href: "https://cn.vitest.dev", rel: "nofollow", target: "_blank", children: "vitest" }), "。然而jest的测试在最开始的时候很多时候是使用官网的方式去做，也就是 ", _jsx(_components.code, { children: "pnpm add jest vue-jest babel-jest vue-test-utils" }), "。这种方式允许", _jsx(_components.strong, { children: "直接访问组件实例" }), "、props、data、methods 等，进行“白盒测试”。这种方式的缺点是测试容易与组件内部实现耦合，当重构代码（比如重命名一个内部变量）时，即使最终页面渲染结果正确，测试也可能失败。"] }), "\n", _jsxs(_components.h3, { id: "testing-library", children: ["Testing Library", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#testing-library", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["随着时间的发展，", _jsx(_components.a, { href: "https://testing-library.com", rel: "nofollow", target: "_blank", children: "Testing library" }), "开始发展起来，测试时只通过 DOM 元素（", _jsx(_components.code, { children: "getByText" }), "、", _jsx(_components.code, { children: "getByRole" }), "）进行交互和断言，这样测试更贴近真实用户行为，也更健壮——重构内部实现时只要 UI 表现不变，测试依然通过。有趣的是，这种“用户视角优先”的模式虽然在国外先发起，并从 React 生态开始流行，但在国内的普及速度和接受程度甚至超过了它的发源地，且渐渐的融入进了vue生态圈。这里以", _jsx(_components.strong, { children: "Testing library" }), "为例子进行展开。"] }), "\n", _jsxs(_components.p, { children: ["vue2+webpack的组合需要安装的包有：", _jsx(_components.code, { children: "jest @vue/vue2-jest @vue/test-utils babel-jest @babel/core @testing-library/vue@5 @testing-library/jest-dom @testing-library/user-event" }), "。不过如果使用", _jsx(_components.code, { children: "vue add unit-jest" }), "可以自动下载对应版本的一些包，执行完成之后还是需要安装", _jsx(_components.code, { children: "@testing-library/vue@5 @testing-library/jest-dom" }), ",所以最终安装顺序为"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 先安装babel、jest和一些基础的包，使用命令不容易出错" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["vue add unit", _jsx(_components.span, { className: "token operator", children: "-" }), "jest\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 然后安装剩下的包,也就是Testing Library需要的包" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["pnpm add ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "testing" })] }), _jsx(_components.span, { className: "token operator", children: "-" }), "library", _jsx(_components.span, { className: "token operator", children: "/" }), "vue", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "5" })] }), " ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "testing" })] }), _jsx(_components.span, { className: "token operator", children: "-" }), "library", _jsx(_components.span, { className: "token operator", children: "/" }), "jest", _jsx(_components.span, { className: "token operator", children: "-" }), "dom ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "testing" })] }), _jsx(_components.span, { className: "token operator", children: "-" }), "library", _jsx(_components.span, { className: "token operator", children: "/" }), "user", _jsx(_components.span, { className: "token operator", children: "-" }), "event ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token constant", children: "D" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "jest.config.js" }), "配置，如果是用命令行安装的，则不需要配置，默认的即可，也就是"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: ["module", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "exports" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "preset" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'@vue/cli-plugin-unit-jest'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "testMatch" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "'**/tests/unit/**/*.spec.[jt]s?(x)'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "'**/tests/unit/**/*.test.[jt]s?(x)'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsx(_components.p, { children: "如果是完全通过pnpm安装的话，需要如下配置,也就是说preset相当于一种预设" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: ["module", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "exports" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "moduleFileExtensions" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'js'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'jsx'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'json'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'vue'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "testEnvironment" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'jsdom'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "transform" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"\\\\.[jt]sx?$\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"babel-jest\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "\"^.+\\\\.vue$\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"vue-jest\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "testMatch" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "'**/tests/unit/**/*.spec.[jt]s?(x)'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string", children: "'**/tests/unit/**/*.test.[jt]s?(x)'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsx(Admonition, { type: "note", title: "test文件可以以test.js结尾，也可以以spec.js结尾，看团队习惯即可。" }), "\n", _jsxs(_components.h3, { id: "编写vue组件的测试用例", children: ["编写vue组件的测试用例", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#编写vue组件的测试用例", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["实际上在使用", _jsx(_components.code, { children: "vue add unit-jest" }), "的时候，就已经生产测试用例了，但是不是基于", _jsx(_components.strong, { children: "Testing Library" }), "来做的，所以可以在对应文件夹里面写下", _jsx(_components.code, { children: "hello.test.js" }), "。不过这之前改造一下此组件"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-vue code-highlight", children: [_jsx(_components.span, { className: "code-line", children: " \n" }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsx(_components.span, { className: "code-line", children: "\n" })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "编写测试用例" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: "userEvent" }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'@testing-library/user-event'" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " render", _jsx(_components.span, { className: "token punctuation", children: "," }), " screen ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'@testing-library/vue'" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "HelloWorld" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'../../src/components/HelloWorld.vue'" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'@testing-library/jest-dom'" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// describe为分组，描述测试组件的意思 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "describe" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'helloWorld.vue'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// it等同于test，BDD风格中倾向于it " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "it" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'初始渲染时，count值为0'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 测试前渲染一次 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "render" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token maybe-class-name", children: "HelloWorld" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 此count对应的是原语句 data-testid=\"count\" const countElement = screen.getByTestId('count') " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "expect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "countElement", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toHaveTextContent" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'0'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "it" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'点击+按钮，count应该加1'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " user ", _jsx(_components.span, { className: "token operator", children: "=" }), " userEvent", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "setup" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "render" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token maybe-class-name", children: "HelloWorld" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " addCountBtn ", _jsx(_components.span, { className: "token operator", children: "=" }), " screen", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "getByText" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'+'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "await" }), " user", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "click" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "addCountBtn", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " countElement ", _jsx(_components.span, { className: "token operator", children: "=" }), " screen", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "getByTestId" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'count'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "expect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "countElement", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toHaveTextContent" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'1'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "it" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'点击 - 按钮后 count 应该减少 1'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " user ", _jsx(_components.span, { className: "token operator", children: "=" }), " userEvent", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "setup" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "render" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token maybe-class-name", children: "HelloWorld" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " decrementBtn ", _jsx(_components.span, { className: "token operator", children: "=" }), " screen", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "getByText" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'-'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "await" }), " user", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "click" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "decrementBtn", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " countElement ", _jsx(_components.span, { className: "token operator", children: "=" }), " screen", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "getByTestId" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'count'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "expect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "countElement", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toHaveTextContent" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'-1'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }) })] }), "\n", _jsx(R2Image, { r2Key: "blog/test-and-deploy/2.png", alt: "2", className: "", caption: "" }), "\n", _jsxs(_components.p, { children: ["当然也可以测试input和", _jsx(_components.code, { children: "v-model" })] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-vue code-highlight", children: [_jsx(_components.span, { className: "code-line", children: "

我是{{ user }}

\n" }), _jsx(_components.span, { className: "code-line", children: "Username: \n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: "data() { \n" }), _jsx(_components.span, { className: "code-line", children: " return { count: 0, user: \"哥哥\" } \n" }), _jsx(_components.span, { className: "code-line", children: "},\n" })] }) }) })] }), "\n", _jsxs(_components.p, { children: ["测试代码如下，使用", _jsx(_components.code, { children: "fireEvent.update" })] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "it" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'测试 user 初始值'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "render" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "HelloWorld", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "expect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "screen", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getByText" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'我是哥哥'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toBeInTheDocument" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "it" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'测试v-model'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " user ", _jsx(_components.span, { className: "token operator", children: "=" }), " userEvent", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "setup" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "render" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "HelloWorld", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " nameElement ", _jsx(_components.span, { className: "token operator", children: "=" }), " screen", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getByText" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'我是哥哥'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " usernameInput ", _jsx(_components.span, { className: "token operator", children: "=" }), " screen", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getByLabelText" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'Username:'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "await" }), " user", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "clear" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "usernameInput", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "await" }), " user", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "type" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "usernameInput", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'帅哥'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "expect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "nameElement", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toHaveTextContent" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"我是帅哥\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "mock与fn", children: ["Mock与Fn", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mock与fn", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "jest.mock" }), " 是 Jest 提供的一个", _jsx(_components.strong, { children: "模块 Mock 函数" }), "，用于在测试中", _jsx(_components.strong, { children: "自动替换" }), "某个模块的导出内容为模拟实现。它的核心作用就是", _jsx(_components.strong, { children: "隔离被测试的代码，避免依赖真实外部模块" }), "（比如 API 请求、第三方库、工具函数等）。如果只传路径，Jest 会尝试", _jsx(_components.strong, { children: "自动 mock" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["基本用法为", _jsx(_components.code, { children: "jest.mock('模块路径', (模块原始内容) => { 返回模拟对象 });" })] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// src/api/posts.js " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "fetchPosts" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " response ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "await" }), " ", _jsx(_components.span, { className: "token function", children: "fetch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'http://localhost:3000/api/posts'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "then" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "res" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " res", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "json" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " response", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "data" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsxs(_components.span, { className: "token exports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " fetchPosts ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "vue文件：" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-vue code-highlight", children: [_jsx(_components.span, { className: "code-line", children: " \n" }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsx(_components.span, { className: "code-line", children: "\n" })] }) }) })] }), "\n", _jsx(_components.p, { children: "测试代码如下：" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " render", _jsx(_components.span, { className: "token punctuation", children: "," }), " screen", _jsx(_components.span, { className: "token punctuation", children: "," }), " waitFor ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'@testing-library/vue'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'@testing-library/jest-dom'" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 文件名懒得改了 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " PostsList ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'../../src/views/AboutView.vue'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 模拟整个模块 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["jest", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "mock" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'../../src/api/posts'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" fetchPosts", _jsx(_components.span, { className: "token operator", children: ":" }), " jest", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "fn" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " fetchPosts ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'../../src/api/posts'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "describe" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'PostsList.vue'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "afterEach" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" jest", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "clearAllMocks" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "it" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'加载成功时显示文章列表'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " mockPosts ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " id", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'文章一'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " id", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " title", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'文章二'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" fetchPosts", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "mockResolvedValue" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "mockPosts", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "render" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "PostsList", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 等待加载完成，出现文章项 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "await" }), " ", _jsx(_components.span, { className: "token function", children: "waitFor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " items ", _jsx(_components.span, { className: "token operator", children: "=" }), " screen", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getAllByTestId" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'post-item'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "expect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "items", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toHaveLength" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "expect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "screen", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getByText" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'文章一'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toBeInTheDocument" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "expect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "screen", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getByText" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'文章二'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toBeInTheDocument" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "it" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'加载失败时显示错误信息'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" fetchPosts", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "mockRejectedValue" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'网络错误'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "render" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "PostsList", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "await" }), " ", _jsx(_components.span, { className: "token function", children: "waitFor" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "expect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "screen", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getByTestId" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'error'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toHaveTextContent" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'网络错误'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsx(R2Image, { r2Key: "blog/test-and-deploy/3.png", alt: "3", className: "", caption: "" }), "\n", _jsxs(_components.h3, { id: "测试覆盖率", children: ["测试覆盖率", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#测试覆盖率", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["测试覆盖率是衡量测试完整性的重要指标，它统计了被测试代码的执行比例。通常包含四个维度：", _jsx(_components.strong, { children: "语句覆盖率" }), "（Statements，每行代码是否被执行）、", _jsx(_components.strong, { children: "分支覆盖率" }), "（Branches，每个 ", _jsx(_components.code, { children: "if" }), " / ", _jsx(_components.code, { children: "else" }), " 或三元表达式是否都被测试）、", _jsx(_components.strong, { children: "函数覆盖率" }), "（Functions，每个函数是否被调用）和", _jsx(_components.strong, { children: "行覆盖率" }), "（Lines）。"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["在", _jsx(_components.code, { children: "jest.config.js" }), "中配置"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token literal-property property", children: "coverageThreshold" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "global" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "statements" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "80" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "branches" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "60" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "functions" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "80" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "lines" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "80" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["在", _jsx(_components.code, { children: "package.json" }), "配置,运行", _jsx(_components.code, { children: "pnpm run test:coverage" })] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "json" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-json", children: _jsxs(_components.code, { className: "language-json code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token property", children: "\"scripts\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token property", children: "\"test:unit\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"vue-cli-service test:unit\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token property", children: "\"test:coverage\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"vue-cli-service test:unit --coverage\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] })] }) }) })] }), "\n", _jsx(R2Image, { r2Key: "blog/test-and-deploy/4.png", alt: "4", className: "", caption: "" }), "\n", _jsxs(_components.h3, { id: "vitest使用testing-library", children: ["vitest使用Testing Library", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vitest使用testing-library", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://cn.vitest.dev", rel: "nofollow", target: "_blank", children: "vitest" }), "是在vite里面最为流行且官方的测试框架，不过为了统一，同样可以使用", _jsx(_components.strong, { children: "Testing library" }), ",直接说明区别，安装依赖如下"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// vue" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["pnpm add ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token constant", children: "D" }), " vitest jsdom ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "vue" })] }), _jsx(_components.span, { className: "token operator", children: "/" }), "test", _jsx(_components.span, { className: "token operator", children: "-" }), "utils ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "testing" })] }), _jsx(_components.span, { className: "token operator", children: "-" }), "library", _jsx(_components.span, { className: "token operator", children: "/" }), "vue ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "testing" })] }), _jsx(_components.span, { className: "token operator", children: "-" }), "library", _jsx(_components.span, { className: "token operator", children: "/" }), "jest", _jsx(_components.span, { className: "token operator", children: "-" }), "dom ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "vitest" })] }), _jsx(_components.span, { className: "token operator", children: "/" }), "coverage", _jsx(_components.span, { className: "token operator", children: "-" }), "v8\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "//react" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["pnpm add ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token constant", children: "D" }), " vitest jsdom ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "testing" })] }), _jsx(_components.span, { className: "token operator", children: "-" }), "library", _jsx(_components.span, { className: "token operator", children: "/" }), "react ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "testing" })] }), _jsx(_components.span, { className: "token operator", children: "-" }), "library", _jsx(_components.span, { className: "token operator", children: "/" }), "jest", _jsx(_components.span, { className: "token operator", children: "-" }), "dom ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "vitest" })] }), _jsx(_components.span, { className: "token operator", children: "/" }), "coverage", _jsx(_components.span, { className: "token operator", children: "-" }), "v8\n"] })] }) }) })] }), "\n", _jsx(_components.p, { children: "然后测试文件中需要改成" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'@testing-library/jest-dom/vitest'" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// ..." }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "package.json" }), ":"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "json" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-json", children: _jsxs(_components.code, { className: "language-json code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token property", children: "\"scripts\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token property", children: "\"test\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"vitest\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token property", children: "\"coverage\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"vitest run --coverage\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "vite.config.ts" }), "配置："] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " defineConfig ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'vite'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " vue ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'@vitejs/plugin-vue'" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "default" }), " ", _jsx(_components.span, { className: "token function", children: "defineConfig" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" plugins", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token function", children: "vue" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" test", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" environment", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'jsdom'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 模拟浏览器环境" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" globals", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 全局使用 describe/it，无需手动导入" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" coverage", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" provider", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'v8'" }), " ", _jsx(_components.span, { className: "token comment", children: "// 配置测试覆盖率" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "其它的没有什么区别了" }), "\n"] }), "\n", _jsxs(_components.h2, { id: "playwright端到端测试", children: ["Playwright端到端测试", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#playwright端到端测试", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "。。。" }), "\n", _jsxs(_components.h2, { id: "nginx部署", children: ["Nginx部署", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#nginx部署", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "。。。" }), "\n", _jsxs(_components.h2, { id: "docker容器化", children: ["Docker容器化", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#docker容器化", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "。。。" }), "\n", _jsxs(_components.h2, { id: "cicd持续集成", children: ["CI/CD持续集成", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#cicd持续集成", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "。。。" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }