-
-
Notifications
You must be signed in to change notification settings - Fork 6.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add some docs on using jest.mock(...)
#5648
Changes from 6 commits
0e98a27
1465efb
e146c86
1d63239
3cb59c7
0f374a5
84d6229
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -127,6 +127,51 @@ dependent component and configuring that, but the technique is the same. In | |
these cases, try to avoid the temptation to implement logic inside of any | ||
function that's not directly being tested. | ||
|
||
## Mocking Modules | ||
|
||
Suppose we have a class that fetches users from our API. The class uses | ||
[axios](https://github.com/axios/axios) to call the API then returns the `data` | ||
attribute which contains all the users: | ||
|
||
```js | ||
// users.js | ||
import axios from 'axios'; | ||
|
||
class Users { | ||
static all() { | ||
return axios.get('/users.json').then(resp => resp.data); | ||
} | ||
} | ||
|
||
export default Users; | ||
``` | ||
|
||
Now, in order to test this method without actually hitting the API (and thus | ||
creating slow and fragile tests), we can use the `jest.mock(...)` function to | ||
automatically mock the axios module. | ||
|
||
Once we mock the module we can provide a `mockReturnValue` for `.get` that | ||
returns the data we want our test to assert against. In effect, we are saying | ||
that we want axios.get('/users.json') to return a fake response. | ||
|
||
```js | ||
// users.test.js | ||
import axios from 'axios'; | ||
import Users from './users'; | ||
|
||
jest.mock('axios'); | ||
|
||
test('should fetch users', () => { | ||
const resp = {data: [{name: 'Bob'}]}; | ||
axios.get.mockResolvedValue(resp); | ||
|
||
// or you could use the follwing depending on your use case: | ||
// axios.get.mockImpementation(() => Promise.resolve(resp)) | ||
|
||
return Users.all().then(users => expect(users).toEqual(resp.data)); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yep, @danawoodman this fails as written (we also discussed this here): There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ugh... doh sorry about that. Let me clean it up again 🤦♂️ |
||
}); | ||
``` | ||
|
||
## Mock Implementations | ||
|
||
Still, there are cases where it's useful to go beyond the ability to specify | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@danawoodman, documentation should have been changed too (e.g.
mockReturnValue
vsmockResolvedValue
):I've noticed it because create-react-app uses Jest 20 which doesn't have
mockResolvedValue
yet.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@DamianFekete fwiw, create-react-app is on Jest 22 and these docs are for Jest 22
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@rickhanlonii, the released version of create-react-app, 1.5.2, still uses [[email protected]].
The next branch (1.5.1 😄) uses Jest 22.
I do appreciate your comment 👍!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, good to know