如何用javascript进行单元测试_Jest框架的安装、配置与用例编写【教程】

Jest需配置Babel支持才能解析ES6/JSX，测试文件须命名规范（.test.js或__tests__目录），mock必须在import前调用，且需用jest.resetModules()和jest.clearAllMocks()清理状态。

Jest 不需要“配置”也能跑起来，但跳过配置容易在真实项目里踩坑——比如测试不识别 import、ES6 语法报错、或 mock 失效。

安装 Jest 并确保它能解析现代 JavaScript

直接运行 npm install --save-dev jest 装完后，npx jest 会失败，因为默认不处理 import 和 JSX。必须配 jest.config.js 或 package.json 中的 jest 字段，并启用 Babel 支持：

• 装 Babel 相关依赖：npm install --save-dev @babel/core @babel/preset-env @babel/preset-react
• 新建 babel.config.js，内容为：

  module.exports = {
    presets: ['@babel/preset-env', '@babel/preset-react']
  };

• 在 package.json 的 scripts 里加："test": "jest"，再加 "test:watch": "jest --watch" 方便开发时自动重跑

写第一个测试文件：命名和位置有硬性约定

Jest 默认只找两类路径下的文件：__tests__ 文件夹，或以 .test.js / .spec.js 结尾的文件。不能叫 test.js 或 myTest.js，否则不会被发现。

• 例如你要测 src/utils/formatDate.js，对应测试文件应为：src/utils/formatDate.test.js
• 测试内容用 describe 和 it（或 test）组织，断言用 expect(...).toBe(...)
• 别漏掉 export —— 如果被测模块是 ES 模块（export default），测试里必须用 import，且 Node.js 需开启 "type": "module" 或用 require + createRequire，否则报错

mock 函数和模块时，时机比写法更重要

jest.mock() 必须在所有 import 之前调

用，否则 mock 无效。常见错误是把它写在 describe 里面，或者放在 import 后面。

• 正确顺序：

  jest.mock('./api'); // 在 import 之前
  import { fetchData } from './api';
  import { renderComponent } from './component';
  
  describe('renderComponent', () => {
    it('calls fetchData', () => {
      renderComponent();
      expect(fetchData).toHaveBeenCalled();
    });
  });

• 如果 mock 的是第三方库（如 axios），要确保路径写对：jest.mock('axios')，不是 jest.mock('./node_modules/axios')
• 函数级 mock 推荐用 jest.fn() 显式赋值，避免污染全局或影响其他测试用例

最常被忽略的是 jest.resetModules() 和 jest.clearAllMocks() 的使用场景：当一个文件里多次 import 同一模块，或测试间有状态残留时，不手动清理会导致断言误判。这不是可选项，是中大型项目里的必做项。