-
-
Notifications
You must be signed in to change notification settings - Fork 6.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
37 changed files
with
9,602 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
id: architecture | ||
title: Architecture | ||
--- | ||
|
||
If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video: | ||
|
||
<iframe width="560" height="315" src="https://www.youtube.com/embed/3YDiloj8_d0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ||
|
||
If you'd like to learn how to build a testing framework like Jest from scratch, check out this video: | ||
|
||
<iframe width="560" height="315" src="https://www.youtube.com/embed/B8FbUK0WpVU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ||
|
||
There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework. |
58 changes: 58 additions & 0 deletions
58
website/versioned_docs/version-27.4/BypassingModuleMocks.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
--- | ||
id: bypassing-module-mocks | ||
title: Bypassing module mocks | ||
--- | ||
|
||
Jest allows you to mock out whole modules in your tests, which can be useful for testing if your code is calling functions from that module correctly. However, sometimes you may want to use parts of a mocked module in your _test file_, in which case you want to access the original implementation, rather than a mocked version. | ||
|
||
Consider writing a test case for this `createUser` function: | ||
|
||
```javascript title="createUser.js" | ||
import fetch from 'node-fetch'; | ||
|
||
export const createUser = async () => { | ||
const response = await fetch('http://website.com/users', {method: 'POST'}); | ||
const userId = await response.text(); | ||
return userId; | ||
}; | ||
``` | ||
|
||
Your test will want to mock the `fetch` function so that we can be sure that it gets called without actually making the network request. However, you'll also need to mock the return value of `fetch` with a `Response` (wrapped in a `Promise`), as our function uses it to grab the created user's ID. So you might initially try writing a test like this: | ||
|
||
```javascript | ||
jest.mock('node-fetch'); | ||
|
||
import fetch, {Response} from 'node-fetch'; | ||
import {createUser} from './createUser'; | ||
|
||
test('createUser calls fetch with the right args and returns the user id', async () => { | ||
fetch.mockReturnValue(Promise.resolve(new Response('4'))); | ||
|
||
const userId = await createUser(); | ||
|
||
expect(fetch).toHaveBeenCalledTimes(1); | ||
expect(fetch).toHaveBeenCalledWith('http://website.com/users', { | ||
method: 'POST', | ||
}); | ||
expect(userId).toBe('4'); | ||
}); | ||
``` | ||
|
||
However, if you ran that test you would find that the `createUser` function would fail, throwing the error: `TypeError: response.text is not a function`. This is because the `Response` class you've imported from `node-fetch` has been mocked (due to the `jest.mock` call at the top of the test file) so it no longer behaves the way it should. | ||
|
||
To get around problems like this, Jest provides the `jest.requireActual` helper. To make the above test work, make the following change to the imports in the test file: | ||
|
||
```javascript | ||
// BEFORE | ||
jest.mock('node-fetch'); | ||
import fetch, {Response} from 'node-fetch'; | ||
``` | ||
|
||
```javascript | ||
// AFTER | ||
jest.mock('node-fetch'); | ||
import fetch from 'node-fetch'; | ||
const {Response} = jest.requireActual('node-fetch'); | ||
``` | ||
|
||
This allows your test file to import the actual `Response` object from `node-fetch`, rather than a mocked version. This means the test will now pass correctly. |
Oops, something went wrong.