Jest 中文网

Jest 中文网

  • 中文文档
  • API
  • 帮助
  • Blog
  • GitHub
  • 英文官网

›使用指南

简介

  • 快速入门
  • Using Matchers
  • Testing Asynchronous Code
  • Setup and Teardown
  • Mock Functions
  • Jest Platform
  • Jest Community
  • More Resources

使用指南

  • Snapshot Testing
  • An Async Example
  • Timer Mocks
  • Manual Mocks
  • ES6 Class Mocks
  • Bypassing module mocks
  • ECMAScript Modules
  • Using with webpack
  • Using with puppeteer
  • Using with MongoDB
  • Using with DynamoDB
  • DOM Manipulation
  • Watch Plugins
  • Migrating to Jest
  • Troubleshooting
  • Architecture

框架指南

  • Testing React Apps
  • Testing React Native Apps
  • Testing Web Frameworks

API 手册

  • Globals
  • Expect
  • Mock Functions
  • The Jest Object
  • Configuring Jest
  • Jest CLI Options
  • Environment Variables
  • Code Transformation
Edit

DOM Manipulation

Another class of functions that is often considered difficult to test is code that directly manipulates the DOM. Let's see how we can test the following snippet of jQuery code that listens to a click event, fetches some data asynchronously and sets the content of a span.

// displayUser.js
'use strict';

const $ = require('jquery');
const fetchCurrentUser = require('./fetchCurrentUser.js');

$('#button').click(() => {
  fetchCurrentUser(user => {
    const loggedText = 'Logged ' + (user.loggedIn ? 'In' : 'Out');
    $('#username').text(user.fullName + ' - ' + loggedText);
  });
});

Again, we create a test file in the __tests__/ folder:

// __tests__/displayUser-test.js
'use strict';

jest.mock('../fetchCurrentUser');

test('displays a user after a click', () => {
  // Set up our document body
  document.body.innerHTML =
    '<div>' +
    '  <span id="username" />' +
    '  <button id="button" />' +
    '</div>';

  // This module has a side-effect
  require('../displayUser');

  const $ = require('jquery');
  const fetchCurrentUser = require('../fetchCurrentUser');

  // Tell the fetchCurrentUser mock function to automatically invoke
  // its callback with some data
  fetchCurrentUser.mockImplementation(cb => {
    cb({
      fullName: 'Johnny Cash',
      loggedIn: true,
    });
  });

  // Use jquery to emulate a click on our button
  $('#button').click();

  // Assert that the fetchCurrentUser function was called, and that the
  // #username span's inner text was updated as we'd expect it to.
  expect(fetchCurrentUser).toBeCalled();
  expect($('#username').text()).toEqual('Johnny Cash - Logged In');
});

The function being tested adds an event listener on the #button DOM element, so we need to set up our DOM correctly for the test. Jest ships with jsdom which simulates a DOM environment as if you were in the browser. This means that every DOM API that we call can be observed in the same way it would be observed in a browser!

We are mocking fetchCurrentUser.js so that our test doesn't make a real network request but instead resolves to mock data locally. This ensures that our test can complete in milliseconds rather than seconds and guarantees a fast unit test iteration speed.

The code for this example is available at examples/jquery.

← Using with DynamoDBWatch Plugins →
Jest 中文网
中文文档
快速入门使用指南API 参考手册
社区
Stack OverflowReactifluxTwitter
更多
BlogGitHubStar
友链
Bootstrap中文网ReactNext.jsNuxt.jsBlitz.jsDocusaurusGatsbyWebpackNPMYarn
Facebook Open Source
Copyright © 2020 Facebook Inc.
Jest 项目及相关资源的版权归 Facebook 或项目贡献者所有
Jest 中文文档遵循 MIT 开源协议
京ICP备15031610号-38