Skip to content

Commit

Permalink
docs: add Mock ES6 class to Guides section (#2960)
Browse files Browse the repository at this point in the history
Closes #2811
  • Loading branch information
ahnpnl committed Oct 11, 2021
1 parent 9087b3b commit 4c6637f
Show file tree
Hide file tree
Showing 8 changed files with 7,276 additions and 8,136 deletions.
47 changes: 47 additions & 0 deletions website/docs/guides/mock-es6-class.md
@@ -0,0 +1,47 @@
---
id: mock-es6-class
title: Mock ES6 class
---

TypeScript is transpiling your ts file and your module is likely being imported using ES2015s import.
`const soundPlayer = require('./sound-player')`. Therefore creating an instance of the class that was exported as
a default will look like this: `new soundPlayer.default()`. However if you are mocking the class as suggested by the documentation.

```js
jest.mock('./sound-player', () => {
return jest.fn().mockImplementation(() => {
return { playSoundFile: mockPlaySoundFile }
})
})
```

You will get the error

```
TypeError: sound_player_1.default is not a constructor
```

because `soundPlayer.default` does not point to a function. Your mock has to return an object which has a property default
that points to a function.

```js
jest.mock('./sound-player', () => {
return {
default: jest.fn().mockImplementation(() => {
return {
playSoundFile: mockPlaySoundFile,
}
}),
}
})
```

For named imports, like `import { OAuth2 } from './oauth'`, replace `default` with imported module name, `OAuth2` in this example:

```js
jest.mock('./oauth', () => {
return {
OAuth2: ... // mock here
}
})
```
15,226 changes: 7,106 additions & 8,120 deletions website/package-lock.json

Large diffs are not rendered by default.

20 changes: 12 additions & 8 deletions website/package.json
Expand Up @@ -12,16 +12,20 @@
"clear": "docusaurus clear"
},
"dependencies": {
"@akebifiky/remark-simple-plantuml": "^1.0.1",
"@docusaurus/core": "2.0.0-alpha.70",
"@docusaurus/plugin-ideal-image": "2.0.0-alpha.70",
"@docusaurus/plugin-pwa": "2.0.0-alpha.70",
"@docusaurus/preset-classic": "2.0.0-alpha.70",
"@akebifiky/remark-simple-plantuml": "^1.0.2",
"@docusaurus/core": "^2.0.0-beta.6",
"@docusaurus/plugin-ideal-image": "^2.0.0-beta.6",
"@docusaurus/plugin-pwa": "^2.0.0-beta.6",
"@docusaurus/preset-classic": "^2.0.0-beta.6",
"@mdx-js/react": "^1.6.21",
"clsx": "^1.1.1",
"latest-version": "^5.1.0",
"react": "^16.8.4",
"react-dom": "^16.8.4"
"latest-version": "^6.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@types/react": "^17.0.3"
},
"browserslist": {
"production": [
Expand Down
5 changes: 3 additions & 2 deletions website/sidebars.js
Expand Up @@ -22,11 +22,12 @@ module.exports = {
label: 'Guides',
collapsed: false,
items: [
'guides/test-helpers',
'guides/esm-support',
'guides/mock-es6-class',
'guides/react-native',
'guides/using-with-monorepo',
'guides/test-helpers',
'guides/troubleshooting',
'guides/using-with-monorepo',
],
},
{
Expand Down
47 changes: 47 additions & 0 deletions website/versioned_docs/version-26.5/guides/mock-es6-class.md
@@ -0,0 +1,47 @@
---
id: mock-es6-class
title: Mock ES6 class
---

TypeScript is transpiling your ts file and your module is likely being imported using ES2015s import.
`const soundPlayer = require('./sound-player')`. Therefore creating an instance of the class that was exported as
a default will look like this: `new soundPlayer.default()`. However if you are mocking the class as suggested by the documentation.

```js
jest.mock('./sound-player', () => {
return jest.fn().mockImplementation(() => {
return { playSoundFile: mockPlaySoundFile }
})
})
```

You will get the error

```
TypeError: sound_player_1.default is not a constructor
```

because `soundPlayer.default` does not point to a function. Your mock has to return an object which has a property default
that points to a function.

```js
jest.mock('./sound-player', () => {
return {
default: jest.fn().mockImplementation(() => {
return {
playSoundFile: mockPlaySoundFile,
}
}),
}
})
```

For named imports, like `import { OAuth2 } from './oauth'`, replace `default` with imported module name, `OAuth2` in this example:

```js
jest.mock('./oauth', () => {
return {
OAuth2: ... // mock here
}
})
```
47 changes: 47 additions & 0 deletions website/versioned_docs/version-27.0/guides/mock-es6-class.md
@@ -0,0 +1,47 @@
---
id: mock-es6-class
title: Mock ES6 class
---

TypeScript is transpiling your ts file and your module is likely being imported using ES2015s import.
`const soundPlayer = require('./sound-player')`. Therefore creating an instance of the class that was exported as
a default will look like this: `new soundPlayer.default()`. However if you are mocking the class as suggested by the documentation.

```js
jest.mock('./sound-player', () => {
return jest.fn().mockImplementation(() => {
return { playSoundFile: mockPlaySoundFile }
})
})
```

You will get the error

```
TypeError: sound_player_1.default is not a constructor
```

because `soundPlayer.default` does not point to a function. Your mock has to return an object which has a property default
that points to a function.

```js
jest.mock('./sound-player', () => {
return {
default: jest.fn().mockImplementation(() => {
return {
playSoundFile: mockPlaySoundFile,
}
}),
}
})
```

For named imports, like `import { OAuth2 } from './oauth'`, replace `default` with imported module name, `OAuth2` in this example:

```js
jest.mock('./oauth', () => {
return {
OAuth2: ... // mock here
}
})
```
10 changes: 7 additions & 3 deletions website/versioned_sidebars/version-26.5-sidebars.json
Expand Up @@ -53,23 +53,27 @@
"items": [
{
"type": "doc",
"id": "version-26.5/guides/test-helpers"
"id": "version-26.5/guides/esm-support"
},
{
"type": "doc",
"id": "version-26.5/guides/esm-support"
"id": "version-26.5/guides/mock-es6-class"
},
{
"type": "doc",
"id": "version-26.5/guides/react-native"
},
{
"type": "doc",
"id": "version-26.5/guides/using-with-monorepo"
"id": "version-26.5/guides/test-helpers"
},
{
"type": "doc",
"id": "version-26.5/guides/troubleshooting"
},
{
"type": "doc",
"id": "version-26.5/guides/using-with-monorepo"
}
]
},
Expand Down
10 changes: 7 additions & 3 deletions website/versioned_sidebars/version-27.0-sidebars.json
Expand Up @@ -53,23 +53,27 @@
"items": [
{
"type": "doc",
"id": "version-27.0/guides/test-helpers"
"id": "version-27.0/guides/esm-support"
},
{
"type": "doc",
"id": "version-27.0/guides/esm-support"
"id": "version-27.0/guides/mock-es6-class"
},
{
"type": "doc",
"id": "version-27.0/guides/react-native"
},
{
"type": "doc",
"id": "version-27.0/guides/using-with-monorepo"
"id": "version-27.0/guides/test-helpers"
},
{
"type": "doc",
"id": "version-27.0/guides/troubleshooting"
},
{
"type": "doc",
"id": "version-27.0/guides/using-with-monorepo"
}
]
},
Expand Down

0 comments on commit 4c6637f

Please sign in to comment.