From 2dd26ac41917124a6ee48b397b4993f0b4860e26 Mon Sep 17 00:00:00 2001 From: Alberto Suarez <2032683+holylander@users.noreply.github.com> Date: Tue, 18 Jan 2022 15:57:09 +0100 Subject: [PATCH 1/6] describe how to mock/spy class specific method I believe it would be useful for other users to know how to mock/spy just some method of a class. Following these examples here: https://stackoverflow.com/questions/50091438/jest-how-to-mock-one-specific-method-of-a-class --- .../version-27.4/Es6ClassMocks.md | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/website/versioned_docs/version-27.4/Es6ClassMocks.md b/website/versioned_docs/version-27.4/Es6ClassMocks.md index 37d26d744624..2f84a5f120e6 100644 --- a/website/versioned_docs/version-27.4/Es6ClassMocks.md +++ b/website/versioned_docs/version-27.4/Es6ClassMocks.md @@ -236,6 +236,69 @@ jest.mock('./sound-player', () => { This will throw **_TypeError: \_soundPlayer2.default is not a constructor_**, unless the code is transpiled to ES5, e.g. by `@babel/preset-env`. (ES5 doesn't have arrow functions nor classes, so both will be transpiled to plain functions.) +## Mocking a specific method of a class +Lets say that you want to mock or spy the method `playSoundFile` within the class `SoundPlayer`. +A simple example: +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const playSoundFileMock = jest + .spyOn(SoundPlayer.prototype, 'playSoundFile') + .mockImplementation(()=>{console.log("mocked function")}) // comment this line if just want to "spy" + +it("player consumer plays music", ()=>{ +const player = new SoundPlayerConsumer() +player.playSomethingCool() +expect(playSoundFileMock).toHaveBeenCalled() +}) +``` +### Static, getter and setter methods +Lets imagine our class `SoundPlayer` has a getter method `foo` and a static method `brand` +```javascript +export default class SoundPlayer { + constructor() { + this.foo = 'bar'; + } + + playSoundFile(fileName) { + console.log('Playing sound file ' + fileName); + } + + get foo () { + return "bar" + } + static brand (){ + return "player-brand" + } +} +``` +You can mock/spy them easily, here is an example: +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const staticMethodMock = jest + .spyOn(SoundPlayer, 'brand') + .mockImplementation(()=>"some-mocked-brand) + +const getterMethodMock = jest + .spyOn(SoundPlayer.prototype, 'foo','get') + .mockImplementation(()=>"some-mocked-result") + +it("custom methods are called", ()=>{ +const player = new SoundPlayer() +const foo = player.foo +const brand = SoundPlayer.brand() + +expect(staticMethodMock).toHaveBeenCalled() +expect(getterMethodMock).toHaveBeenCalled() +}) +``` + + ## Keeping track of usage (spying on the mock) Injecting a test implementation is helpful, but you will probably also want to test whether the class constructor and methods are called with the correct parameters. From f2ea1ac8d48440fc0c4a8c78ce7146d4fc93163e Mon Sep 17 00:00:00 2001 From: Alberto Suarez Date: Tue, 25 Jan 2022 17:45:28 +0100 Subject: [PATCH 2/6] update main docs as well --- docs/Es6ClassMocks.md | 64 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/docs/Es6ClassMocks.md b/docs/Es6ClassMocks.md index 37d26d744624..c8ddfe567754 100644 --- a/docs/Es6ClassMocks.md +++ b/docs/Es6ClassMocks.md @@ -236,6 +236,70 @@ jest.mock('./sound-player', () => { This will throw **_TypeError: \_soundPlayer2.default is not a constructor_**, unless the code is transpiled to ES5, e.g. by `@babel/preset-env`. (ES5 doesn't have arrow functions nor classes, so both will be transpiled to plain functions.) + +## Mocking a specific method of a class +Lets say that you want to mock or spy the method `playSoundFile` within the class `SoundPlayer`. +A simple example: +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const playSoundFileMock = jest + .spyOn(SoundPlayer.prototype, 'playSoundFile') + .mockImplementation(()=>{console.log("mocked function")}) // comment this line if just want to "spy" + +it("player consumer plays music", ()=>{ +const player = new SoundPlayerConsumer() +player.playSomethingCool() +expect(playSoundFileMock).toHaveBeenCalled() +}) +``` +### Static, getter and setter methods +Lets imagine our class `SoundPlayer` has a getter method `foo` and a static method `brand` +```javascript +export default class SoundPlayer { + constructor() { + this.foo = 'bar'; + } + + playSoundFile(fileName) { + console.log('Playing sound file ' + fileName); + } + + get foo () { + return "bar" + } + static brand (){ + return "player-brand" + } +} +``` +You can mock/spy them easily, here is an example: +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const staticMethodMock = jest + .spyOn(SoundPlayer, 'brand') + .mockImplementation(()=>"some-mocked-brand) + +const getterMethodMock = jest + .spyOn(SoundPlayer.prototype, 'foo','get') + .mockImplementation(()=>"some-mocked-result") + +it("custom methods are called", ()=>{ +const player = new SoundPlayer() +const foo = player.foo +const brand = SoundPlayer.brand() + +expect(staticMethodMock).toHaveBeenCalled() +expect(getterMethodMock).toHaveBeenCalled() +}) +``` + + ## Keeping track of usage (spying on the mock) Injecting a test implementation is helpful, but you will probably also want to test whether the class constructor and methods are called with the correct parameters. From cd3241dcbeb42a77da907f76d7eb87439476277c Mon Sep 17 00:00:00 2001 From: Alberto Suarez Date: Sun, 13 Feb 2022 21:44:15 +0100 Subject: [PATCH 3/6] changes run by prettier --- docs/Es6ClassMocks.md | 42 +++++++++++-------- .../version-27.4/Es6ClassMocks.md | 41 ++++++++++-------- 2 files changed, 48 insertions(+), 35 deletions(-) diff --git a/docs/Es6ClassMocks.md b/docs/Es6ClassMocks.md index c8ddfe567754..1b73cc78fac5 100644 --- a/docs/Es6ClassMocks.md +++ b/docs/Es6ClassMocks.md @@ -236,10 +236,10 @@ jest.mock('./sound-player', () => { This will throw **_TypeError: \_soundPlayer2.default is not a constructor_**, unless the code is transpiled to ES5, e.g. by `@babel/preset-env`. (ES5 doesn't have arrow functions nor classes, so both will be transpiled to plain functions.) - ## Mocking a specific method of a class -Lets say that you want to mock or spy the method `playSoundFile` within the class `SoundPlayer`. -A simple example: + +Lets say that you want to mock or spy the method `playSoundFile` within the class `SoundPlayer`. A simple example: + ```javascript // your jest test file below import SoundPlayer from './sound-player'; @@ -247,16 +247,21 @@ import SoundPlayerConsumer from './sound-player-consumer'; const playSoundFileMock = jest .spyOn(SoundPlayer.prototype, 'playSoundFile') - .mockImplementation(()=>{console.log("mocked function")}) // comment this line if just want to "spy" - -it("player consumer plays music", ()=>{ -const player = new SoundPlayerConsumer() -player.playSomethingCool() -expect(playSoundFileMock).toHaveBeenCalled() -}) + .mockImplementation(() => { + console.log('mocked function'); + }); // comment this line if just want to "spy" + +it('player consumer plays music', () => { + const player = new SoundPlayerConsumer(); + player.playSomethingCool(); + expect(playSoundFileMock).toHaveBeenCalled(); +}); ``` + ### Static, getter and setter methods + Lets imagine our class `SoundPlayer` has a getter method `foo` and a static method `brand` + ```javascript export default class SoundPlayer { constructor() { @@ -266,16 +271,18 @@ export default class SoundPlayer { playSoundFile(fileName) { console.log('Playing sound file ' + fileName); } - - get foo () { - return "bar" + + get foo() { + return 'bar'; } - static brand (){ - return "player-brand" + static brand() { + return 'player-brand'; } } -``` +``` + You can mock/spy them easily, here is an example: + ```javascript // your jest test file below import SoundPlayer from './sound-player'; @@ -284,7 +291,7 @@ import SoundPlayerConsumer from './sound-player-consumer'; const staticMethodMock = jest .spyOn(SoundPlayer, 'brand') .mockImplementation(()=>"some-mocked-brand) - + const getterMethodMock = jest .spyOn(SoundPlayer.prototype, 'foo','get') .mockImplementation(()=>"some-mocked-result") @@ -299,7 +306,6 @@ expect(getterMethodMock).toHaveBeenCalled() }) ``` - ## Keeping track of usage (spying on the mock) Injecting a test implementation is helpful, but you will probably also want to test whether the class constructor and methods are called with the correct parameters. diff --git a/website/versioned_docs/version-27.4/Es6ClassMocks.md b/website/versioned_docs/version-27.4/Es6ClassMocks.md index 2f84a5f120e6..1b73cc78fac5 100644 --- a/website/versioned_docs/version-27.4/Es6ClassMocks.md +++ b/website/versioned_docs/version-27.4/Es6ClassMocks.md @@ -237,8 +237,9 @@ jest.mock('./sound-player', () => { This will throw **_TypeError: \_soundPlayer2.default is not a constructor_**, unless the code is transpiled to ES5, e.g. by `@babel/preset-env`. (ES5 doesn't have arrow functions nor classes, so both will be transpiled to plain functions.) ## Mocking a specific method of a class -Lets say that you want to mock or spy the method `playSoundFile` within the class `SoundPlayer`. -A simple example: + +Lets say that you want to mock or spy the method `playSoundFile` within the class `SoundPlayer`. A simple example: + ```javascript // your jest test file below import SoundPlayer from './sound-player'; @@ -246,16 +247,21 @@ import SoundPlayerConsumer from './sound-player-consumer'; const playSoundFileMock = jest .spyOn(SoundPlayer.prototype, 'playSoundFile') - .mockImplementation(()=>{console.log("mocked function")}) // comment this line if just want to "spy" - -it("player consumer plays music", ()=>{ -const player = new SoundPlayerConsumer() -player.playSomethingCool() -expect(playSoundFileMock).toHaveBeenCalled() -}) + .mockImplementation(() => { + console.log('mocked function'); + }); // comment this line if just want to "spy" + +it('player consumer plays music', () => { + const player = new SoundPlayerConsumer(); + player.playSomethingCool(); + expect(playSoundFileMock).toHaveBeenCalled(); +}); ``` + ### Static, getter and setter methods + Lets imagine our class `SoundPlayer` has a getter method `foo` and a static method `brand` + ```javascript export default class SoundPlayer { constructor() { @@ -265,16 +271,18 @@ export default class SoundPlayer { playSoundFile(fileName) { console.log('Playing sound file ' + fileName); } - - get foo () { - return "bar" + + get foo() { + return 'bar'; } - static brand (){ - return "player-brand" + static brand() { + return 'player-brand'; } } -``` +``` + You can mock/spy them easily, here is an example: + ```javascript // your jest test file below import SoundPlayer from './sound-player'; @@ -283,7 +291,7 @@ import SoundPlayerConsumer from './sound-player-consumer'; const staticMethodMock = jest .spyOn(SoundPlayer, 'brand') .mockImplementation(()=>"some-mocked-brand) - + const getterMethodMock = jest .spyOn(SoundPlayer.prototype, 'foo','get') .mockImplementation(()=>"some-mocked-result") @@ -298,7 +306,6 @@ expect(getterMethodMock).toHaveBeenCalled() }) ``` - ## Keeping track of usage (spying on the mock) Injecting a test implementation is helpful, but you will probably also want to test whether the class constructor and methods are called with the correct parameters. From cd64a3343b201ad26db3e5e645474dfc838cd108 Mon Sep 17 00:00:00 2001 From: Alberto Suarez Date: Sun, 13 Feb 2022 21:47:32 +0100 Subject: [PATCH 4/6] update previous versioned docs --- .../version-25.x/Es6ClassMocks.md | 70 +++++++++++++++++++ .../version-26.x/Es6ClassMocks.md | 70 +++++++++++++++++++ .../version-27.0/Es6ClassMocks.md | 70 +++++++++++++++++++ .../version-27.1/Es6ClassMocks.md | 70 +++++++++++++++++++ .../version-27.2/Es6ClassMocks.md | 70 +++++++++++++++++++ 5 files changed, 350 insertions(+) diff --git a/website/versioned_docs/version-25.x/Es6ClassMocks.md b/website/versioned_docs/version-25.x/Es6ClassMocks.md index 37d26d744624..1b73cc78fac5 100644 --- a/website/versioned_docs/version-25.x/Es6ClassMocks.md +++ b/website/versioned_docs/version-25.x/Es6ClassMocks.md @@ -236,6 +236,76 @@ jest.mock('./sound-player', () => { This will throw **_TypeError: \_soundPlayer2.default is not a constructor_**, unless the code is transpiled to ES5, e.g. by `@babel/preset-env`. (ES5 doesn't have arrow functions nor classes, so both will be transpiled to plain functions.) +## Mocking a specific method of a class + +Lets say that you want to mock or spy the method `playSoundFile` within the class `SoundPlayer`. A simple example: + +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const playSoundFileMock = jest + .spyOn(SoundPlayer.prototype, 'playSoundFile') + .mockImplementation(() => { + console.log('mocked function'); + }); // comment this line if just want to "spy" + +it('player consumer plays music', () => { + const player = new SoundPlayerConsumer(); + player.playSomethingCool(); + expect(playSoundFileMock).toHaveBeenCalled(); +}); +``` + +### Static, getter and setter methods + +Lets imagine our class `SoundPlayer` has a getter method `foo` and a static method `brand` + +```javascript +export default class SoundPlayer { + constructor() { + this.foo = 'bar'; + } + + playSoundFile(fileName) { + console.log('Playing sound file ' + fileName); + } + + get foo() { + return 'bar'; + } + static brand() { + return 'player-brand'; + } +} +``` + +You can mock/spy them easily, here is an example: + +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const staticMethodMock = jest + .spyOn(SoundPlayer, 'brand') + .mockImplementation(()=>"some-mocked-brand) + +const getterMethodMock = jest + .spyOn(SoundPlayer.prototype, 'foo','get') + .mockImplementation(()=>"some-mocked-result") + +it("custom methods are called", ()=>{ +const player = new SoundPlayer() +const foo = player.foo +const brand = SoundPlayer.brand() + +expect(staticMethodMock).toHaveBeenCalled() +expect(getterMethodMock).toHaveBeenCalled() +}) +``` + ## Keeping track of usage (spying on the mock) Injecting a test implementation is helpful, but you will probably also want to test whether the class constructor and methods are called with the correct parameters. diff --git a/website/versioned_docs/version-26.x/Es6ClassMocks.md b/website/versioned_docs/version-26.x/Es6ClassMocks.md index 37d26d744624..1b73cc78fac5 100644 --- a/website/versioned_docs/version-26.x/Es6ClassMocks.md +++ b/website/versioned_docs/version-26.x/Es6ClassMocks.md @@ -236,6 +236,76 @@ jest.mock('./sound-player', () => { This will throw **_TypeError: \_soundPlayer2.default is not a constructor_**, unless the code is transpiled to ES5, e.g. by `@babel/preset-env`. (ES5 doesn't have arrow functions nor classes, so both will be transpiled to plain functions.) +## Mocking a specific method of a class + +Lets say that you want to mock or spy the method `playSoundFile` within the class `SoundPlayer`. A simple example: + +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const playSoundFileMock = jest + .spyOn(SoundPlayer.prototype, 'playSoundFile') + .mockImplementation(() => { + console.log('mocked function'); + }); // comment this line if just want to "spy" + +it('player consumer plays music', () => { + const player = new SoundPlayerConsumer(); + player.playSomethingCool(); + expect(playSoundFileMock).toHaveBeenCalled(); +}); +``` + +### Static, getter and setter methods + +Lets imagine our class `SoundPlayer` has a getter method `foo` and a static method `brand` + +```javascript +export default class SoundPlayer { + constructor() { + this.foo = 'bar'; + } + + playSoundFile(fileName) { + console.log('Playing sound file ' + fileName); + } + + get foo() { + return 'bar'; + } + static brand() { + return 'player-brand'; + } +} +``` + +You can mock/spy them easily, here is an example: + +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const staticMethodMock = jest + .spyOn(SoundPlayer, 'brand') + .mockImplementation(()=>"some-mocked-brand) + +const getterMethodMock = jest + .spyOn(SoundPlayer.prototype, 'foo','get') + .mockImplementation(()=>"some-mocked-result") + +it("custom methods are called", ()=>{ +const player = new SoundPlayer() +const foo = player.foo +const brand = SoundPlayer.brand() + +expect(staticMethodMock).toHaveBeenCalled() +expect(getterMethodMock).toHaveBeenCalled() +}) +``` + ## Keeping track of usage (spying on the mock) Injecting a test implementation is helpful, but you will probably also want to test whether the class constructor and methods are called with the correct parameters. diff --git a/website/versioned_docs/version-27.0/Es6ClassMocks.md b/website/versioned_docs/version-27.0/Es6ClassMocks.md index 37d26d744624..1b73cc78fac5 100644 --- a/website/versioned_docs/version-27.0/Es6ClassMocks.md +++ b/website/versioned_docs/version-27.0/Es6ClassMocks.md @@ -236,6 +236,76 @@ jest.mock('./sound-player', () => { This will throw **_TypeError: \_soundPlayer2.default is not a constructor_**, unless the code is transpiled to ES5, e.g. by `@babel/preset-env`. (ES5 doesn't have arrow functions nor classes, so both will be transpiled to plain functions.) +## Mocking a specific method of a class + +Lets say that you want to mock or spy the method `playSoundFile` within the class `SoundPlayer`. A simple example: + +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const playSoundFileMock = jest + .spyOn(SoundPlayer.prototype, 'playSoundFile') + .mockImplementation(() => { + console.log('mocked function'); + }); // comment this line if just want to "spy" + +it('player consumer plays music', () => { + const player = new SoundPlayerConsumer(); + player.playSomethingCool(); + expect(playSoundFileMock).toHaveBeenCalled(); +}); +``` + +### Static, getter and setter methods + +Lets imagine our class `SoundPlayer` has a getter method `foo` and a static method `brand` + +```javascript +export default class SoundPlayer { + constructor() { + this.foo = 'bar'; + } + + playSoundFile(fileName) { + console.log('Playing sound file ' + fileName); + } + + get foo() { + return 'bar'; + } + static brand() { + return 'player-brand'; + } +} +``` + +You can mock/spy them easily, here is an example: + +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const staticMethodMock = jest + .spyOn(SoundPlayer, 'brand') + .mockImplementation(()=>"some-mocked-brand) + +const getterMethodMock = jest + .spyOn(SoundPlayer.prototype, 'foo','get') + .mockImplementation(()=>"some-mocked-result") + +it("custom methods are called", ()=>{ +const player = new SoundPlayer() +const foo = player.foo +const brand = SoundPlayer.brand() + +expect(staticMethodMock).toHaveBeenCalled() +expect(getterMethodMock).toHaveBeenCalled() +}) +``` + ## Keeping track of usage (spying on the mock) Injecting a test implementation is helpful, but you will probably also want to test whether the class constructor and methods are called with the correct parameters. diff --git a/website/versioned_docs/version-27.1/Es6ClassMocks.md b/website/versioned_docs/version-27.1/Es6ClassMocks.md index 37d26d744624..1b73cc78fac5 100644 --- a/website/versioned_docs/version-27.1/Es6ClassMocks.md +++ b/website/versioned_docs/version-27.1/Es6ClassMocks.md @@ -236,6 +236,76 @@ jest.mock('./sound-player', () => { This will throw **_TypeError: \_soundPlayer2.default is not a constructor_**, unless the code is transpiled to ES5, e.g. by `@babel/preset-env`. (ES5 doesn't have arrow functions nor classes, so both will be transpiled to plain functions.) +## Mocking a specific method of a class + +Lets say that you want to mock or spy the method `playSoundFile` within the class `SoundPlayer`. A simple example: + +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const playSoundFileMock = jest + .spyOn(SoundPlayer.prototype, 'playSoundFile') + .mockImplementation(() => { + console.log('mocked function'); + }); // comment this line if just want to "spy" + +it('player consumer plays music', () => { + const player = new SoundPlayerConsumer(); + player.playSomethingCool(); + expect(playSoundFileMock).toHaveBeenCalled(); +}); +``` + +### Static, getter and setter methods + +Lets imagine our class `SoundPlayer` has a getter method `foo` and a static method `brand` + +```javascript +export default class SoundPlayer { + constructor() { + this.foo = 'bar'; + } + + playSoundFile(fileName) { + console.log('Playing sound file ' + fileName); + } + + get foo() { + return 'bar'; + } + static brand() { + return 'player-brand'; + } +} +``` + +You can mock/spy them easily, here is an example: + +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const staticMethodMock = jest + .spyOn(SoundPlayer, 'brand') + .mockImplementation(()=>"some-mocked-brand) + +const getterMethodMock = jest + .spyOn(SoundPlayer.prototype, 'foo','get') + .mockImplementation(()=>"some-mocked-result") + +it("custom methods are called", ()=>{ +const player = new SoundPlayer() +const foo = player.foo +const brand = SoundPlayer.brand() + +expect(staticMethodMock).toHaveBeenCalled() +expect(getterMethodMock).toHaveBeenCalled() +}) +``` + ## Keeping track of usage (spying on the mock) Injecting a test implementation is helpful, but you will probably also want to test whether the class constructor and methods are called with the correct parameters. diff --git a/website/versioned_docs/version-27.2/Es6ClassMocks.md b/website/versioned_docs/version-27.2/Es6ClassMocks.md index 37d26d744624..1b73cc78fac5 100644 --- a/website/versioned_docs/version-27.2/Es6ClassMocks.md +++ b/website/versioned_docs/version-27.2/Es6ClassMocks.md @@ -236,6 +236,76 @@ jest.mock('./sound-player', () => { This will throw **_TypeError: \_soundPlayer2.default is not a constructor_**, unless the code is transpiled to ES5, e.g. by `@babel/preset-env`. (ES5 doesn't have arrow functions nor classes, so both will be transpiled to plain functions.) +## Mocking a specific method of a class + +Lets say that you want to mock or spy the method `playSoundFile` within the class `SoundPlayer`. A simple example: + +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const playSoundFileMock = jest + .spyOn(SoundPlayer.prototype, 'playSoundFile') + .mockImplementation(() => { + console.log('mocked function'); + }); // comment this line if just want to "spy" + +it('player consumer plays music', () => { + const player = new SoundPlayerConsumer(); + player.playSomethingCool(); + expect(playSoundFileMock).toHaveBeenCalled(); +}); +``` + +### Static, getter and setter methods + +Lets imagine our class `SoundPlayer` has a getter method `foo` and a static method `brand` + +```javascript +export default class SoundPlayer { + constructor() { + this.foo = 'bar'; + } + + playSoundFile(fileName) { + console.log('Playing sound file ' + fileName); + } + + get foo() { + return 'bar'; + } + static brand() { + return 'player-brand'; + } +} +``` + +You can mock/spy them easily, here is an example: + +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const staticMethodMock = jest + .spyOn(SoundPlayer, 'brand') + .mockImplementation(()=>"some-mocked-brand) + +const getterMethodMock = jest + .spyOn(SoundPlayer.prototype, 'foo','get') + .mockImplementation(()=>"some-mocked-result") + +it("custom methods are called", ()=>{ +const player = new SoundPlayer() +const foo = player.foo +const brand = SoundPlayer.brand() + +expect(staticMethodMock).toHaveBeenCalled() +expect(getterMethodMock).toHaveBeenCalled() +}) +``` + ## Keeping track of usage (spying on the mock) Injecting a test implementation is helpful, but you will probably also want to test whether the class constructor and methods are called with the correct parameters. From 20d25cd4a9d96785e22017ba67e39f4485bebb15 Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Mon, 14 Feb 2022 08:02:21 +0100 Subject: [PATCH 5/6] syntax error and prettier --- docs/Es6ClassMocks.md | 20 +++++++++---------- .../version-25.x/Es6ClassMocks.md | 20 +++++++++---------- .../version-26.x/Es6ClassMocks.md | 20 +++++++++---------- .../version-27.0/Es6ClassMocks.md | 20 +++++++++---------- .../version-27.1/Es6ClassMocks.md | 20 +++++++++---------- .../version-27.2/Es6ClassMocks.md | 20 +++++++++---------- .../version-27.4/Es6ClassMocks.md | 20 +++++++++---------- 7 files changed, 70 insertions(+), 70 deletions(-) diff --git a/docs/Es6ClassMocks.md b/docs/Es6ClassMocks.md index 1b73cc78fac5..3907980f80b2 100644 --- a/docs/Es6ClassMocks.md +++ b/docs/Es6ClassMocks.md @@ -290,20 +290,20 @@ import SoundPlayerConsumer from './sound-player-consumer'; const staticMethodMock = jest .spyOn(SoundPlayer, 'brand') - .mockImplementation(()=>"some-mocked-brand) + .mockImplementation(() => 'some-mocked-brand'); const getterMethodMock = jest - .spyOn(SoundPlayer.prototype, 'foo','get') - .mockImplementation(()=>"some-mocked-result") + .spyOn(SoundPlayer.prototype, 'foo', 'get') + .mockImplementation(() => 'some-mocked-result'); -it("custom methods are called", ()=>{ -const player = new SoundPlayer() -const foo = player.foo -const brand = SoundPlayer.brand() +it('custom methods are called', () => { + const player = new SoundPlayer(); + const foo = player.foo; + const brand = SoundPlayer.brand(); -expect(staticMethodMock).toHaveBeenCalled() -expect(getterMethodMock).toHaveBeenCalled() -}) + expect(staticMethodMock).toHaveBeenCalled(); + expect(getterMethodMock).toHaveBeenCalled(); +}); ``` ## Keeping track of usage (spying on the mock) diff --git a/website/versioned_docs/version-25.x/Es6ClassMocks.md b/website/versioned_docs/version-25.x/Es6ClassMocks.md index 1b73cc78fac5..3907980f80b2 100644 --- a/website/versioned_docs/version-25.x/Es6ClassMocks.md +++ b/website/versioned_docs/version-25.x/Es6ClassMocks.md @@ -290,20 +290,20 @@ import SoundPlayerConsumer from './sound-player-consumer'; const staticMethodMock = jest .spyOn(SoundPlayer, 'brand') - .mockImplementation(()=>"some-mocked-brand) + .mockImplementation(() => 'some-mocked-brand'); const getterMethodMock = jest - .spyOn(SoundPlayer.prototype, 'foo','get') - .mockImplementation(()=>"some-mocked-result") + .spyOn(SoundPlayer.prototype, 'foo', 'get') + .mockImplementation(() => 'some-mocked-result'); -it("custom methods are called", ()=>{ -const player = new SoundPlayer() -const foo = player.foo -const brand = SoundPlayer.brand() +it('custom methods are called', () => { + const player = new SoundPlayer(); + const foo = player.foo; + const brand = SoundPlayer.brand(); -expect(staticMethodMock).toHaveBeenCalled() -expect(getterMethodMock).toHaveBeenCalled() -}) + expect(staticMethodMock).toHaveBeenCalled(); + expect(getterMethodMock).toHaveBeenCalled(); +}); ``` ## Keeping track of usage (spying on the mock) diff --git a/website/versioned_docs/version-26.x/Es6ClassMocks.md b/website/versioned_docs/version-26.x/Es6ClassMocks.md index 1b73cc78fac5..3907980f80b2 100644 --- a/website/versioned_docs/version-26.x/Es6ClassMocks.md +++ b/website/versioned_docs/version-26.x/Es6ClassMocks.md @@ -290,20 +290,20 @@ import SoundPlayerConsumer from './sound-player-consumer'; const staticMethodMock = jest .spyOn(SoundPlayer, 'brand') - .mockImplementation(()=>"some-mocked-brand) + .mockImplementation(() => 'some-mocked-brand'); const getterMethodMock = jest - .spyOn(SoundPlayer.prototype, 'foo','get') - .mockImplementation(()=>"some-mocked-result") + .spyOn(SoundPlayer.prototype, 'foo', 'get') + .mockImplementation(() => 'some-mocked-result'); -it("custom methods are called", ()=>{ -const player = new SoundPlayer() -const foo = player.foo -const brand = SoundPlayer.brand() +it('custom methods are called', () => { + const player = new SoundPlayer(); + const foo = player.foo; + const brand = SoundPlayer.brand(); -expect(staticMethodMock).toHaveBeenCalled() -expect(getterMethodMock).toHaveBeenCalled() -}) + expect(staticMethodMock).toHaveBeenCalled(); + expect(getterMethodMock).toHaveBeenCalled(); +}); ``` ## Keeping track of usage (spying on the mock) diff --git a/website/versioned_docs/version-27.0/Es6ClassMocks.md b/website/versioned_docs/version-27.0/Es6ClassMocks.md index 1b73cc78fac5..3907980f80b2 100644 --- a/website/versioned_docs/version-27.0/Es6ClassMocks.md +++ b/website/versioned_docs/version-27.0/Es6ClassMocks.md @@ -290,20 +290,20 @@ import SoundPlayerConsumer from './sound-player-consumer'; const staticMethodMock = jest .spyOn(SoundPlayer, 'brand') - .mockImplementation(()=>"some-mocked-brand) + .mockImplementation(() => 'some-mocked-brand'); const getterMethodMock = jest - .spyOn(SoundPlayer.prototype, 'foo','get') - .mockImplementation(()=>"some-mocked-result") + .spyOn(SoundPlayer.prototype, 'foo', 'get') + .mockImplementation(() => 'some-mocked-result'); -it("custom methods are called", ()=>{ -const player = new SoundPlayer() -const foo = player.foo -const brand = SoundPlayer.brand() +it('custom methods are called', () => { + const player = new SoundPlayer(); + const foo = player.foo; + const brand = SoundPlayer.brand(); -expect(staticMethodMock).toHaveBeenCalled() -expect(getterMethodMock).toHaveBeenCalled() -}) + expect(staticMethodMock).toHaveBeenCalled(); + expect(getterMethodMock).toHaveBeenCalled(); +}); ``` ## Keeping track of usage (spying on the mock) diff --git a/website/versioned_docs/version-27.1/Es6ClassMocks.md b/website/versioned_docs/version-27.1/Es6ClassMocks.md index 1b73cc78fac5..3907980f80b2 100644 --- a/website/versioned_docs/version-27.1/Es6ClassMocks.md +++ b/website/versioned_docs/version-27.1/Es6ClassMocks.md @@ -290,20 +290,20 @@ import SoundPlayerConsumer from './sound-player-consumer'; const staticMethodMock = jest .spyOn(SoundPlayer, 'brand') - .mockImplementation(()=>"some-mocked-brand) + .mockImplementation(() => 'some-mocked-brand'); const getterMethodMock = jest - .spyOn(SoundPlayer.prototype, 'foo','get') - .mockImplementation(()=>"some-mocked-result") + .spyOn(SoundPlayer.prototype, 'foo', 'get') + .mockImplementation(() => 'some-mocked-result'); -it("custom methods are called", ()=>{ -const player = new SoundPlayer() -const foo = player.foo -const brand = SoundPlayer.brand() +it('custom methods are called', () => { + const player = new SoundPlayer(); + const foo = player.foo; + const brand = SoundPlayer.brand(); -expect(staticMethodMock).toHaveBeenCalled() -expect(getterMethodMock).toHaveBeenCalled() -}) + expect(staticMethodMock).toHaveBeenCalled(); + expect(getterMethodMock).toHaveBeenCalled(); +}); ``` ## Keeping track of usage (spying on the mock) diff --git a/website/versioned_docs/version-27.2/Es6ClassMocks.md b/website/versioned_docs/version-27.2/Es6ClassMocks.md index 1b73cc78fac5..3907980f80b2 100644 --- a/website/versioned_docs/version-27.2/Es6ClassMocks.md +++ b/website/versioned_docs/version-27.2/Es6ClassMocks.md @@ -290,20 +290,20 @@ import SoundPlayerConsumer from './sound-player-consumer'; const staticMethodMock = jest .spyOn(SoundPlayer, 'brand') - .mockImplementation(()=>"some-mocked-brand) + .mockImplementation(() => 'some-mocked-brand'); const getterMethodMock = jest - .spyOn(SoundPlayer.prototype, 'foo','get') - .mockImplementation(()=>"some-mocked-result") + .spyOn(SoundPlayer.prototype, 'foo', 'get') + .mockImplementation(() => 'some-mocked-result'); -it("custom methods are called", ()=>{ -const player = new SoundPlayer() -const foo = player.foo -const brand = SoundPlayer.brand() +it('custom methods are called', () => { + const player = new SoundPlayer(); + const foo = player.foo; + const brand = SoundPlayer.brand(); -expect(staticMethodMock).toHaveBeenCalled() -expect(getterMethodMock).toHaveBeenCalled() -}) + expect(staticMethodMock).toHaveBeenCalled(); + expect(getterMethodMock).toHaveBeenCalled(); +}); ``` ## Keeping track of usage (spying on the mock) diff --git a/website/versioned_docs/version-27.4/Es6ClassMocks.md b/website/versioned_docs/version-27.4/Es6ClassMocks.md index 1b73cc78fac5..3907980f80b2 100644 --- a/website/versioned_docs/version-27.4/Es6ClassMocks.md +++ b/website/versioned_docs/version-27.4/Es6ClassMocks.md @@ -290,20 +290,20 @@ import SoundPlayerConsumer from './sound-player-consumer'; const staticMethodMock = jest .spyOn(SoundPlayer, 'brand') - .mockImplementation(()=>"some-mocked-brand) + .mockImplementation(() => 'some-mocked-brand'); const getterMethodMock = jest - .spyOn(SoundPlayer.prototype, 'foo','get') - .mockImplementation(()=>"some-mocked-result") + .spyOn(SoundPlayer.prototype, 'foo', 'get') + .mockImplementation(() => 'some-mocked-result'); -it("custom methods are called", ()=>{ -const player = new SoundPlayer() -const foo = player.foo -const brand = SoundPlayer.brand() +it('custom methods are called', () => { + const player = new SoundPlayer(); + const foo = player.foo; + const brand = SoundPlayer.brand(); -expect(staticMethodMock).toHaveBeenCalled() -expect(getterMethodMock).toHaveBeenCalled() -}) + expect(staticMethodMock).toHaveBeenCalled(); + expect(getterMethodMock).toHaveBeenCalled(); +}); ``` ## Keeping track of usage (spying on the mock) From 5b62f85fa849223762ebf97347d5bee3021836d7 Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Mon, 14 Feb 2022 08:03:50 +0100 Subject: [PATCH 6/6] 27.5 --- .../version-27.5/Es6ClassMocks.md | 70 +++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/website/versioned_docs/version-27.5/Es6ClassMocks.md b/website/versioned_docs/version-27.5/Es6ClassMocks.md index 37d26d744624..3907980f80b2 100644 --- a/website/versioned_docs/version-27.5/Es6ClassMocks.md +++ b/website/versioned_docs/version-27.5/Es6ClassMocks.md @@ -236,6 +236,76 @@ jest.mock('./sound-player', () => { This will throw **_TypeError: \_soundPlayer2.default is not a constructor_**, unless the code is transpiled to ES5, e.g. by `@babel/preset-env`. (ES5 doesn't have arrow functions nor classes, so both will be transpiled to plain functions.) +## Mocking a specific method of a class + +Lets say that you want to mock or spy the method `playSoundFile` within the class `SoundPlayer`. A simple example: + +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const playSoundFileMock = jest + .spyOn(SoundPlayer.prototype, 'playSoundFile') + .mockImplementation(() => { + console.log('mocked function'); + }); // comment this line if just want to "spy" + +it('player consumer plays music', () => { + const player = new SoundPlayerConsumer(); + player.playSomethingCool(); + expect(playSoundFileMock).toHaveBeenCalled(); +}); +``` + +### Static, getter and setter methods + +Lets imagine our class `SoundPlayer` has a getter method `foo` and a static method `brand` + +```javascript +export default class SoundPlayer { + constructor() { + this.foo = 'bar'; + } + + playSoundFile(fileName) { + console.log('Playing sound file ' + fileName); + } + + get foo() { + return 'bar'; + } + static brand() { + return 'player-brand'; + } +} +``` + +You can mock/spy them easily, here is an example: + +```javascript +// your jest test file below +import SoundPlayer from './sound-player'; +import SoundPlayerConsumer from './sound-player-consumer'; + +const staticMethodMock = jest + .spyOn(SoundPlayer, 'brand') + .mockImplementation(() => 'some-mocked-brand'); + +const getterMethodMock = jest + .spyOn(SoundPlayer.prototype, 'foo', 'get') + .mockImplementation(() => 'some-mocked-result'); + +it('custom methods are called', () => { + const player = new SoundPlayer(); + const foo = player.foo; + const brand = SoundPlayer.brand(); + + expect(staticMethodMock).toHaveBeenCalled(); + expect(getterMethodMock).toHaveBeenCalled(); +}); +``` + ## Keeping track of usage (spying on the mock) Injecting a test implementation is helpful, but you will probably also want to test whether the class constructor and methods are called with the correct parameters.