Jest 测试失败时，如何查看 dom tree

前端开发中，我们无法避免测试出现失败的情况。当 Jest 测试出错时，查看错误信息可能可以帮助我们找到问题的根源。但是有些情况下，仅仅依靠日志信息并不足够，我们可能需要进一步查看测试失败时的 dom tree 以及相关的 css 样式等信息。

在本文中，我们将介绍如何通过 Jest 提供的工具查看测试失败时的 dom tree，帮助我们定位测试问题。

安装 Jest

在开始之前，我们需要安装 Jest。如果您已经安装了 Jest，可以跳过本步骤。

对于新手，可以使用以下命令安装 Jest：

npm install --save-dev jest

设置 Jest

在下一步中，我们将使用 Jest 中的一个插件 - jest-environment-jsdom-fourteen，这是一个能够模拟浏览器的插件。

我们需要在 Jest 的配置文件中设置这个插件。打开 jest.config.js 文件，添加以下代码：

module.exports = {
  testEnvironment: 'jest-environment-jsdom-fourteen'
}

这样一来，我们就已经设置好了 Jest。

使用 Jest 提供的 debug 工具

在测试过程中，当断言失败时，我们可以使用 Jest 的 debug 工具进入交互模式，以便查看测试运行的上下文和执行状态。

在使用 debug 工具时，我们可能需要知道 Jest 的内置变量：

• element：当前断言的 dom 元素。
• $0：浏览器中实际选中的 dom 元素。
• $els：匹配当前断言的所有元素的 dom 数组。
• window：使用了 jsdom 的情况下，当前 global 对象。
• document：使用了 jsdom 的情况下，当前 document 对象。
• getComputedStyle($0)：获取浏览器中 $0 元素的样式信息（包含所有属性）。

以下是一个简单的 jest 测试用例：

describe('test suite', () => {
  test('test case', () => {
    const div = document.createElement('div')
    div.className = 'test'
    document.body.appendChild(div)
    expect(div.className).toBe('test1')
  })
})

运行以上代码，我们将看到测试失败。

接下来，我们可以通过 Jest 提供的交互式 debug 模式进入调试，查看测试结果。

describe('test suite', () => {
  test('test case', () => {
    const div = document.createElement('div')
    div.className = 'test'
    document.body.appendChild(div)
    expect(div.className).toBe('test1')
  })
})

当我们运行此测试用例时，Jest 会在命令行提示我们启动交互模式。我们可以选择启动模式，然后控制台进入交互模式（REPL）：

// www.javascriptcn.com code example
$ npm test

> jest

 PASS  ./index.test.js
  test suite
    ✕ test case (8ms)

  ● test suite › test case

    expect(received).toBe(expected) // Object.is equality

    Expected: "test1"
    Received: "test"

      5 |   div.className = 'test'
      6 |   document.body.appendChild(div)
    > 7 |   expect(div.className).toBe('test1')
        |                        ^
      8 | })
      9 |

      at Object.<anonymous> (index.test.js:7:24)

在这里，我们可以访问断言失败时的 div 元素，并查看它的 className 属性，或者访问其他的 dom 元素、函数等信息。

例如，我们可以使用 $0 查看浏览器中实际选中的 dom 元素：

describe('test suite', () => {
  test('test case', () => {
    const div = document.createElement('div')
    div.className = 'test'
    document.body.appendChild(div)
    expect(div.className).toBe('test1')
  })
})

// www.javascriptcn.com code example
$ npm test

> jest

 PASS  ./index.test.js
  test suite
    ✕ test case (8ms)

  ● test suite › test case

    expect(received).toBe(expected) // Object.is equality

    Expected: "test1"
    Received: "test"

      5 |   div.className = 'test'
      6 |   document.body.appendChild(div)
    > 7 |   expect(div.className).toBe('test1')
        |                        ^
      8 | })
      9 |

      at Object.<anonymous> (index.test.js:7:24)

我们可以使用 getComputedStyle($0) 获取浏览器中实际选中的 dom 元素的样式信息（包含所有属性）：

describe('test suite', () => {
  test('test case', () => {
    const div = document.createElement('div')
    div.className = 'test'
    document.body.appendChild(div)
    expect(div.className).toBe('test1')
  })
})

// www.javascriptcn.com code example
$ npm test

> jest

 PASS  ./index.test.js
  test suite
    ✕ test case (8ms)

  ● test suite › test case

    expect(received).toBe(expected) // Object.is equality

    Expected: "test1"
    Received: "test"

      5 |   div.className = 'test'
      6 |   document.body.appendChild(div)
    > 7 |   expect(div.className).toBe('test1')
        |                        ^
      8 | })
      9 |

      at Object.<anonymous> (index.test.js:7:24)

这样，我们就可以通过 Jest 提供的交互式 debug 工具进行调试，查看测试失败时的 dom tree 和 css 样式等信息了。

结语

在本文中，我们介绍了如何使用 Jest 提供的 debug 工具查看测试失败时的 dom tree 和 css 样式等信息，以帮助我们快速定位和解决测试问题。学习和掌握这个技能，可以有效提高我们的前端测试效率，同时也能帮助我们更好地理解测试用例执行的上下文。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bc46fba231b2b7eddc5560