npm 包 eslint-config-jest-enzyme 使用教程

如果你曾经使用过 Jest 和 Enzyme 进行测试，那么你一定会知道它们对于 React 和 React Native 开发的重要性。而如果你也在写前端代码，那么你也一定知道代码的规范对于项目的可维护性和开发效率的重要性。eslint-config-jest-enzyme 就是一款可以帮你规范 Jest 和 Enzyme 测试代码的 npm 包，让你轻松写出优质的测试代码。

安装

在项目根目录下执行以下命令即可安装 eslint-config-jest-enzyme：

npm install --save-dev eslint-config-jest-enzyme

配置

在项目的 .eslintrc 文件中添加以下配置：

{
  "extends": ["jest-enzyme"]
}

如果你使用的是 Create React App 创建的项目，可以在 package.json 文件中添加以下配置：

{
  "eslintConfig": {
    "extends": ["jest-enzyme"]
  }
}

另外，你也可以在 .eslintrc 文件中针对 Jest 或 Enzyme 进行修改配置，例如：

{
  "extends": ["jest-enzyme"],
  "rules": {
    "jest/expect-expect": "off",
    "jest/no-conditional-expect": "off",
    "enzyme/no-shallow-clone": "error"
  }
}

深入了解

eslint-config-jest-enzyme 集成了一些可以保证 Jest 和 Enzyme 测试代码质量的规则，以下是一些主要的规则：

Jest 相关规则

• [jest/consistent-test-it]: 强制测试用例使用 test('description', () => {}) 而不是 it('description', () => {})
• [jest/expect-expect]: 强制每个测试用例都至少有一个 expect 断言
• [jest/no-conditional-expect]: 禁止使用带有条件的 expect 断言

Enzyme 相关规则

• [enzyme/no-unsafe-shallow]: 禁止使用 shallow 进行无意义的浅渲染
• [enzyme/no-invalid-wrapper]: 禁止使用 mount(<div/>) 的语法糖，因为它使得渲染无法调用 unmount 方法
• [enzyme/no-shallow-clone]: 禁止使用 wrapper.instance().setState() 来修改 state
• [enzyme/no-state-mutation]: 禁止直接修改 Enzyme 测试组件的 state

更多规则详情可以参考：

• eslint-plugin-jest
• eslint-plugin-enzyme

示例

以下是一个使用 eslint-config-jest-enzyme 的测试函数示例：

-- -------------------- ---- -------
------------------ -- -- -
  ----------- ------- -------- -- -- -
    ----- ------- - --------------- ----
    -------------------------------
  ---

  ----------- ------- ---- ----- -- ------- -- -- -
    ----- ------- - --------------- -------------------- --------------
    ---------------------------------- ------
  ---

  --------- ------- ---- ------ -- --------- -- -- -
    ----- ----------- - ----------
    ----- ------- - ------------- --------------------------- --------------
    -----------------------------------------
    ---------------------------------------------
  ---
---

通过使用 eslint-config-jest-enzyme，我们可以更加轻松地书写高质量的测试代码，并且代码会更具可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/eslint-config-jest-enzyme