使用 ESLint 和 Jest 提升单元测试代码规范-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，单元测试是非常重要的一环。它可以帮助我们发现代码中的问题，提高代码质量，减少出现 bug 的可能性。但是，如果我们没有遵循规范去编写测试代码，那么这些测试代码的作用就会大打折扣。因此，本文将会介绍如何使用 ESLint 和 Jest 提升单元测试代码规范。

ESLint

ESLint 是一款 JavaScript 代码检查工具，它可以帮助我们发现代码中的潜在问题，并提供指导性的建议。在编写单元测试代码时，我们同样需要遵循一定的规范，以确保测试代码的可读性和可维护性。下面是一些常见的 ESLint 规则，可以帮助我们编写更好的测试代码。

no-global-assertions

这个规则用于禁止在测试代码中使用全局的断言函数，例如 assert()、expect() 等。这样做的原因是，全局断言函数会污染全局命名空间，使得代码难以维护。相反，我们应该使用测试框架提供的断言函数，例如 Jest 的 expect()。

// bad
assert(sum(1, 2) === 3);

// good
expect(sum(1, 2)).toBe(3);

prefer-expect-assertions

这个规则用于鼓励使用 Jest 的 expect().xxx() 风格的断言，而不是传统的 assert.xxx() 风格的断言。这样做的好处是，expect().xxx() 风格的断言更加清晰易读，可以提高代码的可读性。

// bad
assert.strictEqual(sum(1, 2), 3);

// good
expect(sum(1, 2)).toBe(3);

no-mutation-in-assertion

这个规则用于禁止在断言语句中修改变量的值。这样做的原因是，如果在断言语句中修改了变量的值，那么后续的断言可能会受到影响，导致测试结果不准确。

// bad
const result = sum(1, 2);
assert(result === 3);
result = 4;

// good
const result = sum(1, 2);
expect(result).toBe(3);

no-identical-title

这个规则用于禁止重复的测试用例标题。这样做的原因是，重复的标题可能会导致测试结果不准确，也会使代码难以维护。

// javascriptcn.com 代码示例
// bad
describe('sum function', () => {
  test('should return 3', () => {
    expect(sum(1, 2)).toBe(3);
  });

  test('should return 4', () => {
    expect(sum(2, 2)).toBe(4);
  });

  test('should return 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
});

// good
describe('sum function', () => {
  test('should return 3 when passed 1 and 2', () => {
    expect(sum(1, 2)).toBe(3);
  });

  test('should return 4 when passed 2 and 2', () => {
    expect(sum(2, 2)).toBe(4);
  });

  test('should return 5 when passed 2 and 3', () => {
    expect(sum(2, 3)).toBe(5);
  });
});

以上是一些常见的 ESLint 规则，当然还有很多其他的规则可以帮助我们编写更好的测试代码。通过在项目中配置 ESLint，我们可以在编写测试代码时自动检查这些规则，从而提高测试代码的质量。

Jest

Jest 是一款流行的 JavaScript 测试框架，它具有简单易用、速度快、功能强大等特点。在编写单元测试时，我们可以使用 Jest 来编写测试用例，并使用 Jest 提供的 API 来进行断言、异步测试等操作。下面是一些常见的 Jest API，可以帮助我们编写更好的测试代码。

expect()

expect() 是 Jest 提供的断言函数，它可以用来检查某个值是否符合预期。我们可以使用 expect() 结合链式调用的方式来编写清晰易读的断言语句。

test('should return 3 when passed 1 and 2', () => {
  expect(sum(1, 2)).toBe(3);
});

除了 toBe() 之外，expect() 还提供了很多其他的断言方法，例如 toEqual()、toMatch()、toThrow() 等，可以根据具体的情况选择使用。

describe()

describe() 是 Jest 提供的一个用于组织测试用例的函数。我们可以使用 describe() 来将多个相关的测试用例组织在一起，从而提高代码的可读性。

// javascriptcn.com 代码示例
describe('sum function', () => {
  test('should return 3 when passed 1 and 2', () => {
    expect(sum(1, 2)).toBe(3);
  });

  test('should return 4 when passed 2 and 2', () => {
    expect(sum(2, 2)).toBe(4);
  });
});

beforeEach()、afterEach()

beforeEach() 和 afterEach() 是 Jest 提供的两个钩子函数，它们分别在每个测试用例执行前和执行后被调用。我们可以使用这两个钩子函数来进行一些准备工作或清理工作，例如初始化数据、清空数据等。

// javascriptcn.com 代码示例
describe('sum function', () => {
  let a, b;

  beforeEach(() => {
    a = 1;
    b = 2;
  });

  afterEach(() => {
    a = null;
    b = null;
  });

  test('should return 3 when passed 1 and 2', () => {
    expect(sum(a, b)).toBe(3);
  });

  test('should return 4 when passed 2 and 2', () => {
    expect(sum(b, b)).toBe(4);
  });
});

async/await

Jest 支持异步测试，我们可以使用 async/await 或 Promise 的方式来编写异步测试代码。在异步测试中，我们需要使用 done 参数或 async/await 来保证测试用例在异步操作完成后才结束。

test('should resolve to 42 after 1 second', async () => {
  const result = await asyncSum(40, 2);
  expect(result).toBe(42);
});

test('should reject with an error message', async () => {
  await expect(asyncSum(1, -1)).rejects.toEqual('Invalid arguments');
});

通过学习以上 Jest API，我们可以编写出更加清晰易读、可维护的测试代码，从而提高测试代码的质量。

总结

本文介绍了如何使用 ESLint 和 Jest 提升单元测试代码规范。通过遵循一定的规范，我们可以编写出更加清晰易读、可维护的测试代码，从而提高测试代码的质量。同时，ESLint 和 Jest 的使用也可以帮助我们自动检查代码规范，并提供指导性的建议，使得我们能够更加轻松地编写出高质量的测试代码。

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