cpojerandFacebook Github Bot 3
81d6697617
Summary:This gets Jest ready for 0.9.0. What's new? * Slightly refreshed look, based on the Relay website. * New summary of what Jest is on the website. * New Getting Started guide, with babel support and key feature explanation. * Added a troubleshooting section. * Updated all examples in the documentation. * Added all new APIs to the API docs, updated everything to use `jest.fn()` instead of `jest.genMockFn()`. * Removed the webpack alias and coffeescript guides. Neither of them are really supported or useful at this point. We can bring back a guide later on proper webpack integration if someone in the community takes this on. The webpack-alias feature is handled by the `moduleNameMapper` API. * Added a link to the `Failed to get metadata` error in Jest. See http://cpojer.github.io/jest/ for a preview. In a follow-up I'll add a section on async testing for Promises and some more info about automocking. Closes https://github.com/facebook/jest/pull/763 Reviewed By: yungsters Differential Revision: D3005361 fb-gh-sync-id: f8e634cf4a311764f311f8b5849781b53975e686 shipit-source-id: f8e634cf4a311764f311f8b5849781b53975e686
2.6 KiB
id, title, layout, category, permalink, next
| id | title | layout | category | permalink | next |
|---|---|---|---|---|---|
| tutorial-jquery | Tutorial – jQuery | docs | Quick Start | docs/tutorial-jquery.html | common-js-testing |
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
.unmock('../displayUser.js')
.unmock('jquery');
describe('displayUser', () => {
it('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({
loggedIn: true,
fullName: 'Johnny Cash',
});
});
// Use jquery to emulate a click on our button
$('#button').click();
// Assert that the fetchCurrentUser function was called, and that the
// #username span's innter text was updated as we'd it expect.
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 setup 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!
Since we are interested in testing that displayUser.js makes specific changes
to the DOM, we tell Jest not to mock our jquery dependency. This lets
displayUser.js actually mutate the DOM, and it gives us an easy means of
querying the DOM in our test.
The code for this example is available at examples/tutorial/.