Jest 单元测试报错：TypeError: Cannot read property 'getAttribute' of null 解决方案

在进行前端开发时，我们通常会使用 Jest 进行单元测试。但是有时候在进行测试时，会出现 TypeError: Cannot read property 'getAttribute' of null 的错误，这是因为在测试期间，我们的测试代码无法找到对应的元素，从而导致无法读取其属性。本文将介绍这种错误的解决方案，并提供示例代码以供参考。

错误原因

这种错误通常是由于我们的测试代码无法找到对应的元素引起的。例如，我们在测试某个组件的时候，可能会使用类似下面的代码：

const button = document.querySelector('.button');
button.getAttribute('disabled');

但是，如果在测试期间，页面上不存在 .button 类的元素，那么 document.querySelector('.button') 将返回 null，从而导致后续调用 getAttribute 方法时出现 TypeError 错误。

解决方案

为了解决这个问题，我们需要在测试代码中添加一些容错处理，以确保我们的测试代码能够正确地处理不存在的元素。下面是一些常用的解决方案。

方案一：使用 optional chaining

在 JavaScript 中，我们可以使用 optional chaining 运算符 ?. 来简化代码，这个运算符可以帮助我们在访问对象属性时避免出现 TypeError 错误。例如，我们可以将上面的代码改为：

const button = document.querySelector('.button');
button?.getAttribute('disabled');

这样，如果 document.querySelector('.button') 返回 null，后续的 button?.getAttribute('disabled') 将直接返回 undefined，而不会抛出 TypeError 错误。

方案二：使用 try-catch 语句

另一种解决方案是使用 try-catch 语句来捕获错误。例如，我们可以将上面的代码改为：

const button = document.querySelector('.button');
try {
  button.getAttribute('disabled');
} catch (e) {
  console.error(e);
}

这样，如果 document.querySelector('.button') 返回 null，后续的 button.getAttribute('disabled') 将抛出 TypeError 错误，但是由于我们使用了 try-catch 语句，错误不会导致测试失败，而是会被捕获并输出到控制台中。

方案三：使用 expect 语句

Jest 提供了 expect 语句来帮助我们编写更加简洁和可读的测试代码。在使用 expect 语句时，我们可以使用 toBeNull 或者 toBeUndefined 来判断一个变量是否为 null 或者 undefined。例如，我们可以将上面的代码改为：

const button = document.querySelector('.button');
expect(button.getAttribute('disabled')).toBeNull();

这样，如果 document.querySelector('.button') 返回 null，后续的 button.getAttribute('disabled') 将返回 null，而不会抛出 TypeError 错误。同时，我们使用 expect 语句来判断返回值是否为 null，如果不是，测试将失败并输出错误信息。

示例代码

下面是一个示例代码，它演示了如何在测试代码中使用 optional chaining 运算符、try-catch 语句和 expect 语句来解决 TypeError 错误。

describe('button', () => {
  test('should have disabled attribute', () => {
    // 方案一：使用 optional chaining
    const button1 = document.querySelector('.button');
    expect(button1?.getAttribute('disabled')).toBeNull();

    // 方案二：使用 try-catch 语句
    const button2 = document.querySelector('.button');
    try {
      button2.getAttribute('disabled');
    } catch (e) {
      console.error(e);
    }

    // 方案三：使用 expect 语句
    const button3 = document.querySelector('.button');
    expect(button3.getAttribute('disabled')).toBeNull();
  });
});

总结

在进行前端单元测试时，我们可能会遇到 TypeError: Cannot read property 'getAttribute' of null 的错误，这是因为我们的测试代码无法找到对应的元素。为了解决这个问题，我们可以使用 optional chaining 运算符、try-catch 语句和 expect 语句等方法来处理不存在的元素，从而避免 TypeError 错误的出现。

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