Skip to content

docs(jest.doMock): Add information for using ES6 modules with doMock #8573

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.

Sign up for GitHub

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

Merged
merged 5 commits into from
Jun 18, 2019
Merged

docs(jest.doMock): Add information for using ES6 modules with doMock #8573

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
005cafe
docs(jest.doMock): Add information for ES6 modules
sargalias Jun 17, 2019
024868d
chore(CHANGELOG): Update CHANGELOG
sargalias Jun 17, 2019
e255a40
docs(jest.doMock): Fix statement on import hoisting behavior
sargalias Jun 17, 2019
10d961f
docs(jest.doMock): Clarify statement about ES6 imports and `require`
sargalias Jun 18, 2019
fcf22bf
docs(jest.doMock): Return promise in example tests
sargalias Jun 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
- `[jest-leak-detector]` remove code repeat ([#8438](https://github.com/facebook/jest/pull/8438)
- `[docs]` Add example to `jest.requireActual` ([#8482](https://github.com/facebook/jest/pull/8482)
- `[docs]` Add example to `jest.mock` for mocking ES6 modules with the `factory` parameter ([#8550](https://github.com/facebook/jest/pull/8550))
- `[docs]` Add information about using `jest.doMock` with ES6 modules ([#8573](https://github.com/facebook/jest/pull/8573))

### Performance

Expand Down
40 changes: 40 additions & 0 deletions docs/JestObjectAPI.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,46 @@ test('moduleName 2', () => {
});
```

Using `jest.doMock()` with ES6 modules requires additional steps:
Copy link
Contributor

@thymikee thymikee Jun 18, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No it doesn't. Using jest.doMock with ES6 imports does. Please clarify this, because people may get wrong idea that they need to install some babel plugin to actually test a module.

This should clearly state something like: "use if you don't want to require your ES6 modules"

Copy link
Contributor Author

@sargalias sargalias Jun 18, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, changed.


- We have to specify the `__esModule: true` property (see the [`jest.mock()`](#jestmockmodulename-factory-options) API for more information).
- Static ES6 module imports are hoisted to the top of the file, so instead we have to import them dynamically using `import()`.
- Finally, we need an environment which supports dynamic importing. Please see [Using Babel](GettingStarted.md#using-babel) for the initial setup. Then add the plugin [babel-plugin-dynamic-import-node](https://www.npmjs.com/package/babel-plugin-dynamic-import-node), or an equivalent, to your Babel config to enable dynamic importing in Node.

```js
beforeEach(() => {
jest.resetModules();
});

test('moduleName 1', () => {
jest.doMock('../moduleName', () => {
return {
__esModule: true,
default: 'default1',
foo: 'foo1',
};
});
import('../moduleName').then(moduleName => {
Copy link
Contributor

@thymikee thymikee Jun 18, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please either use async/await or return this promise from test – otherwise it's not gonna work properly. Same for the test below.

Copy link
Contributor Author

@sargalias sargalias Jun 18, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes you're correct. Surprisingly these worked for me anyway (i.e. when changing the value in toEqual the test failed), possibly some implementation detail of mocking and Babel.

Changed.

expect(moduleName.default).toEqual('default1');
expect(moduleName.foo).toEqual('foo1');
});
});

test('moduleName 2', () => {
jest.doMock('../moduleName', () => {
return {
__esModule: true,
default: 'default2',
foo: 'foo2',
};
});
import('../moduleName').then(moduleName => {
expect(moduleName.default).toEqual('default2');
expect(moduleName.foo).toEqual('foo2');
});
});
```

Returns the `jest` object for chaining.

### `jest.dontMock(moduleName)`
Expand Down
40 changes: 40 additions & 0 deletions website/versioned_docs/version-22.x/JestObjectAPI.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,6 +368,46 @@ test('moduleName 2', () => {
});
```

Using `jest.doMock()` with ES6 modules requires additional steps:

- We have to specify the `__esModule: true` property (see the [`jest.mock()`](#jestmockmodulename-factory-options) API for more information).
- Static ES6 module imports are hoisted to the top of the file, so instead we have to import them dynamically using `import()`.
- Finally, we need an environment which supports dynamic importing. Please see [Using Babel](GettingStarted.md#using-babel) for the initial setup. Then add the plugin [babel-plugin-dynamic-import-node](https://www.npmjs.com/package/babel-plugin-dynamic-import-node), or an equivalent, to your Babel config to enable dynamic importing in Node.

```js
beforeEach(() => {
jest.resetModules();
});

test('moduleName 1', () => {
jest.doMock('../moduleName', () => {
return {
__esModule: true,
default: 'default1',
foo: 'foo1',
};
});
import('../moduleName').then(moduleName => {
expect(moduleName.default).toEqual('default1');
expect(moduleName.foo).toEqual('foo1');
});
});

test('moduleName 2', () => {
jest.doMock('../moduleName', () => {
return {
__esModule: true,
default: 'default2',
foo: 'foo2',
};
});
import('../moduleName').then(moduleName => {
expect(moduleName.default).toEqual('default2');
expect(moduleName.foo).toEqual('foo2');
});
});
```

Returns the `jest` object for chaining.

### `jest.dontMock(moduleName)`
Expand Down
40 changes: 40 additions & 0 deletions website/versioned_docs/version-23.x/JestObjectAPI.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,6 +369,46 @@ test('moduleName 2', () => {
});
```

Using `jest.doMock()` with ES6 modules requires additional steps:

- We have to specify the `__esModule: true` property (see the [`jest.mock()`](#jestmockmodulename-factory-options) API for more information).
- Static ES6 module imports are hoisted to the top of the file, so instead we have to import them dynamically using `import()`.
- Finally, we need an environment which supports dynamic importing. Please see [Using Babel](GettingStarted.md#using-babel) for the initial setup. Then add the plugin [babel-plugin-dynamic-import-node](https://www.npmjs.com/package/babel-plugin-dynamic-import-node), or an equivalent, to your Babel config to enable dynamic importing in Node.

```js
beforeEach(() => {
jest.resetModules();
});

test('moduleName 1', () => {
jest.doMock('../moduleName', () => {
return {
__esModule: true,
default: 'default1',
foo: 'foo1',
};
});
import('../moduleName').then(moduleName => {
expect(moduleName.default).toEqual('default1');
expect(moduleName.foo).toEqual('foo1');
});
});

test('moduleName 2', () => {
jest.doMock('../moduleName', () => {
return {
__esModule: true,
default: 'default2',
foo: 'foo2',
};
});
import('../moduleName').then(moduleName => {
expect(moduleName.default).toEqual('default2');
expect(moduleName.foo).toEqual('foo2');
});
});
```

Returns the `jest` object for chaining.

### `jest.dontMock(moduleName)`
Expand Down
40 changes: 40 additions & 0 deletions website/versioned_docs/version-24.0/JestObjectAPI.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,46 @@ test('moduleName 2', () => {
});
```

Using `jest.doMock()` with ES6 modules requires additional steps:

- We have to specify the `__esModule: true` property (see the [`jest.mock()`](#jestmockmodulename-factory-options) API for more information).
- Static ES6 module imports are hoisted to the top of the file, so instead we have to import them dynamically using `import()`.
- Finally, we need an environment which supports dynamic importing. Please see [Using Babel](GettingStarted.md#using-babel) for the initial setup. Then add the plugin [babel-plugin-dynamic-import-node](https://www.npmjs.com/package/babel-plugin-dynamic-import-node), or an equivalent, to your Babel config to enable dynamic importing in Node.

```js
beforeEach(() => {
jest.resetModules();
});

test('moduleName 1', () => {
jest.doMock('../moduleName', () => {
return {
__esModule: true,
default: 'default1',
foo: 'foo1',
};
});
import('../moduleName').then(moduleName => {
expect(moduleName.default).toEqual('default1');
expect(moduleName.foo).toEqual('foo1');
});
});

test('moduleName 2', () => {
jest.doMock('../moduleName', () => {
return {
__esModule: true,
default: 'default2',
foo: 'foo2',
};
});
import('../moduleName').then(moduleName => {
expect(moduleName.default).toEqual('default2');
expect(moduleName.foo).toEqual('foo2');
});
});
```

Returns the `jest` object for chaining.

### `jest.dontMock(moduleName)`
Expand Down