Jest DOM操作

2021-09-04 13:45 更新

另一类通常被认为难以测试的函数是直接操作 DOM 的代码。让我们看看如何测试以下用来侦听单击事件、异步获取一些数据并设置 span 的内容的 jQuery 代码片段。

  1. // displayUser.js
  2. 'use strict';
  3. const $ = require('jquery');
  4. const fetchCurrentUser = require('./fetchCurrentUser.js');
  5. $('#button').click(() => {
  6. fetchCurrentUser(user => {
  7. const loggedText = 'Logged ' + (user.loggedIn ? 'In' : 'Out');
  8. $('#username').text(user.fullName + ' - ' + loggedText);
  9. });
  10. });

接着,我们在​__tests__/​文件夹下创建一个测试文件:

  1. // __tests__/displayUser-test.js
  2. 'use strict';
  3. jest.mock('../fetchCurrentUser');
  4. test('displays a user after a click', () => {
  5. // Set up our document body
  6. document.body.innerHTML =
  7. '<div>' +
  8. ' <span id="username" />' +
  9. ' <button id="button" />' +
  10. '</div>';
  11. // This module has a side-effect
  12. require('../displayUser');
  13. const $ = require('jquery');
  14. const fetchCurrentUser = require('../fetchCurrentUser');
  15. // Tell the fetchCurrentUser mock function to automatically invoke
  16. // its callback with some data
  17. fetchCurrentUser.mockImplementation(cb => {
  18. cb({
  19. fullName: 'Johnny Cash',
  20. loggedIn: true,
  21. });
  22. });
  23. // Use jquery to emulate a click on our button
  24. $('#button').click();
  25. // Assert that the fetchCurrentUser function was called, and that the
  26. // #username span's inner text was updated as we'd expect it to.
  27. expect(fetchCurrentUser).toBeCalled();
  28. expect($('#username').text()).toEqual('Johnny Cash - Logged In');
  29. });

被测试的函数在​#buttonDOM​ 元素上添加了一个事件监听器,所以我们需要为测试正确设置我们的 DOM。Jest 附带​jsdom​它模拟 DOM 环境,就像在浏览器中一样。这意味着我们调用的每个 DOM API 都可以像在浏览器中一样被观察到!

我们模拟了 ​fetchCurrentUser.js​的实现,这样我们的测试就不会产生真正的网络请求,而是使用本地mock的数据。 这确保了我们的测试能够在毫秒级完成,而不是秒,并且保证了快速的单元测试迭代速度。

这个例子的代码可以 examples/jquery找到。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号