ESLint 和 Jest 的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

ESLint 和 Jest 是两个在前端开发中广泛使用的工具，它们可以帮助我们提高代码质量、规范开发流程、自动化测试等方面。本文将介绍 ESLint 和 Jest 的最佳实践，并提供一些示例代码以供参考。

ESLint 最佳实践

1. 配置文件

ESLint 的配置文件是一个 JSON 文件，我们可以在其中指定规则、插件、解析器等配置项。建议将配置文件命名为 .eslintrc.json，并将其放置在项目根目录下。

以下是一个常用的配置文件示例：

// javascriptcn.com 代码示例
{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parser": "babel-eslint",
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

其中：

extends 指定了继承的规则集，这里使用了 eslint:recommended 和 plugin:react/recommended，前者是 ESLint 提供的推荐规则集，后者是针对 React 开发的规则集。
parser 指定了解析器，这里使用了 babel-eslint，它可以解析 ES6+ 语法和 JSX。
plugins 指定了使用的插件，这里使用了 react-hooks 插件，它可以检查 React Hooks 的使用情况。
rules 指定了具体的规则，这里设置了两个规则：semi 和 quotes，分别指定了分号和引号的使用方式，并且使用了 react-hooks 插件提供的两个规则。

2. 忽略文件

有些文件可能不需要进行 ESLint 检查，我们可以在项目根目录下新建一个 .eslintignore 文件来指定需要忽略的文件或目录。以下是一个示例：

node_modules/
build/
dist/
*.css

其中：

node_modules/ 表示忽略 node_modules 目录下的所有文件。
build/ 和 dist/ 表示忽略 build 和 dist 目录下的所有文件。
*.css 表示忽略所有的 .css 文件。

3. 集成到编辑器

我们可以将 ESLint 集成到编辑器中，以便在开发过程中实时检查代码。常见的编辑器集成方式有两种：

使用 ESLint 插件：比如 VS Code 中的 ESLint 插件，安装后会自动读取项目中的 .eslintrc.json 文件，并在编辑器中提示错误。
使用编辑器插件：比如 VS Code 中的 Prettier 插件，安装后可以在保存文件时自动进行代码格式化，并且支持与 ESLint 集成，可以将 Prettier 和 ESLint 的规则结合起来使用。

Jest 最佳实践

1. 配置文件

Jest 的配置文件是一个 JavaScript 文件，我们可以在其中指定测试文件的匹配规则、测试覆盖率报告的生成方式等配置项。建议将配置文件命名为 jest.config.js，并将其放置在项目根目录下。

以下是一个常用的配置文件示例：

// javascriptcn.com 代码示例
module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.(js|jsx)$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
  collectCoverageFrom: ['src/**/*.{js,vue}', '!**/node_modules/**'],
  coverageReporters: ['html', 'text-summary']
};

其中：

moduleFileExtensions 指定了模块文件的扩展名，包括 js、jsx、json 和 vue。
transform 指定了代码转换器，这里使用了 vue-jest 和 babel-jest，分别用于处理 .vue 和 .js 文件。
moduleNameMapper 指定了模块路径的映射关系，这里将 @ 符号映射为 src 目录。
testMatch 指定了测试文件的匹配规则，这里使用了两个通配符，分别匹配 __tests__ 目录下的测试文件和以 spec 或 test 结尾的文件。
collectCoverageFrom 指定了需要统计测试覆盖率的文件，这里统计了 src 目录下的 .js 和 .vue 文件，但排除了 node_modules 目录。
coverageReporters 指定了测试覆盖率报告的生成方式，这里使用了 html 和 text-summary 两种方式。

2. 测试文件

Jest 的测试文件通常以 .test.js 或 .spec.js 结尾，我们可以在其中编写测试用例。以下是一个示例：

import { add } from './utils';

describe('add', () => {
  it('should add two numbers', () => {
    expect(add(1, 2)).toBe(3);
    expect(add(1, -1)).toBe(0);
  });
});

其中：

describe 用于描述测试用例的名称。
it 用于描述测试用例的具体内容，可以包含一个或多个断言。
expect 用于断言测试结果是否符合预期。

3. Mock

Jest 提供了 Mock 功能，可以用于模拟一些场景，比如网络请求、定时器等。以下是一个示例：

// javascriptcn.com 代码示例
import { fetchData } from './api';

jest.mock('./api');

describe('fetchData', () => {
  it('should return data', async () => {
    const mockData = { name: 'Alice' };
    fetchData.mockResolvedValueOnce(mockData);

    const data = await fetchData();
    expect(data).toEqual(mockData);
  });
});

其中：

jest.mock 用于模拟 ./api 模块，使其返回指定的数据。
fetchData.mockResolvedValueOnce 用于指定 fetchData 方法的返回值。
expect(data).toEqual(mockData) 用于断言 fetchData 方法的返回值是否符合预期。

总结

ESLint 和 Jest 是前端开发中非常重要的工具，本文介绍了它们的最佳实践，并提供了一些示例代码。希望本文能够对读者在实际开发中的工作有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65701de4d2f5e1655d8c8cc3