18、React 组件测试指南：Jest、Enzyme 与快照测试

React 组件测试指南：Jest、Enzyme 与快照测试

在 React 开发中，组件测试是确保代码质量和稳定性的关键环节。本文将介绍如何使用 Jest 和 Enzyme 进行 React 组件测试，以及如何利用快照测试快速验证 UI 组件的变化。

1. 配置 Jest 处理 SCSS 导入

在测试过程中，SCSS 导入可能会导致测试失败。为了解决这个问题，我们可以在 package.json 中添加以下配置：

"jest": {
    "setupFiles": ["./__tests__/global.js"],
    "modulePathIgnorePatterns": ["global.js"],
    "moduleNameMapper": {
        "\\.(scss)$": "<rootDir>/node_modules/jest-css-modules"
    }
}

这段配置告诉 Jest 使用 jest-css-modules 模块来处理以 .scss 结尾的导入，从而避免测试因 SCSS 导入而失败。

2. 安装 Enzyme

在开始编写组件测试之前，我们需要安装两个 npm 模块：

npm install enzyme react-addons-test-utils --save-dev