From 65cfe826eab4a3afa735824cf6793df7a57ba641 Mon Sep 17 00:00:00 2001
From: Jeroendevr <jeroendevries@runbox.eu>
Date: Tue, 11 Oct 2022 12:41:34 +0200
Subject: [PATCH 01/34] Runnable example of the for Each test

Hi, Perhaps the documentation is written for (more) experienced programmers or for readers who nicely walked through the tutorial but for past me It would have been helpful to have a runnable example. Therefore my suggested improvements so that one can copy paste it to their editor.
---
 .../version-29.1/MockFunctions.md             | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/website/versioned_docs/version-29.1/MockFunctions.md b/website/versioned_docs/version-29.1/MockFunctions.md
index 40584bc853d3..491837181941 100644
--- a/website/versioned_docs/version-29.1/MockFunctions.md
+++ b/website/versioned_docs/version-29.1/MockFunctions.md
@@ -17,27 +17,33 @@ function forEach(items, callback) {
     callback(items[index]);
   }
 }
+module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
 ```javascript
+const forEach = require("./foreach");
+
 const mockCallback = jest.fn(x => 42 + x);
-forEach([0, 1], mockCallback);
 
-// The mock function is called twice
-expect(mockCallback.mock.calls.length).toBe(2);
+test('forEach mock function', () => {
+  forEach([0, 1], mockCallback);
 
-// The first argument of the first call to the function was 0
-expect(mockCallback.mock.calls[0][0]).toBe(0);
+  // The mock function is called twice
+  expect(mockCallback.mock.calls.length).toBe(2);
 
-// The first argument of the second call to the function was 1
-expect(mockCallback.mock.calls[1][0]).toBe(1);
+  // The first argument of the first call to the function was 0
+  expect(mockCallback.mock.calls[0][0]).toBe(0);
 
-// The return value of the first call to the function was 42
-expect(mockCallback.mock.results[0].value).toBe(42);
-```
+  // The first argument of the second call to the function was 1
+  expect(mockCallback.mock.calls[1][0]).toBe(1);
 
+  // The return value of the first call to the function was 42
+  expect(mockCallback.mock.results[0].value).toBe(42);
+  }
+) 
+```
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:

From 3a88b6960c21a88e187192ba4eb6190ababb5aa6 Mon Sep 17 00:00:00 2001
From: Jeroendevr <jeroendevries@runbox.eu>
Date: Thu, 15 Dec 2022 11:02:20 +0100
Subject: [PATCH 02/34] Update
 website/versioned_docs/version-29.1/MockFunctions.md

Co-authored-by: Tom Mrazauskas <tom@mrazauskas.de>
---
 website/versioned_docs/version-29.1/MockFunctions.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/versioned_docs/version-29.1/MockFunctions.md b/website/versioned_docs/version-29.1/MockFunctions.md
index 491837181941..4419a417b7d5 100644
--- a/website/versioned_docs/version-29.1/MockFunctions.md
+++ b/website/versioned_docs/version-29.1/MockFunctions.md
@@ -30,7 +30,7 @@ const mockCallback = jest.fn(x => 42 + x);
 test('forEach mock function', () => {
   forEach([0, 1], mockCallback);
 
-  // The mock function is called twice
+  // The mock function was called twice
   expect(mockCallback.mock.calls.length).toBe(2);
 
   // The first argument of the first call to the function was 0

From 38afc482d90f574d25426a2aebbc1019528d9bc4 Mon Sep 17 00:00:00 2001
From: Jeroendevr <jeroendevries@runbox.eu>
Date: Thu, 15 Dec 2022 11:02:27 +0100
Subject: [PATCH 03/34] Update
 website/versioned_docs/version-29.1/MockFunctions.md

Co-authored-by: Tom Mrazauskas <tom@mrazauskas.de>
---
 website/versioned_docs/version-29.1/MockFunctions.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/versioned_docs/version-29.1/MockFunctions.md b/website/versioned_docs/version-29.1/MockFunctions.md
index 4419a417b7d5..746c1bfe41cc 100644
--- a/website/versioned_docs/version-29.1/MockFunctions.md
+++ b/website/versioned_docs/version-29.1/MockFunctions.md
@@ -22,7 +22,7 @@ module.exports = forEach;
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```javascript
+```js title="foreach.test.js"
 const forEach = require("./foreach");
 
 const mockCallback = jest.fn(x => 42 + x);

From 8ef48670b62071d69424471d2ab42d76a955381d Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Thu, 15 Dec 2022 11:09:07 +0100
Subject: [PATCH 04/34] Changed docs around all the versions for mockFunc

---
 .../version-25.x/MockFunctions.md             | 52 ++++++++++++-------
 .../version-26.x/MockFunctions.md             | 52 ++++++++++++-------
 .../version-27.x/MockFunctions.md             | 45 ++++++++++------
 .../version-28.x/MockFunctions.md             | 28 ++++++----
 .../version-29.2/MockFunctions.md             | 28 ++++++----
 .../version-29.3/MockFunctions.md             | 28 ++++++----
 6 files changed, 145 insertions(+), 88 deletions(-)

diff --git a/website/versioned_docs/version-25.x/MockFunctions.md b/website/versioned_docs/version-25.x/MockFunctions.md
index 918fc826a74b..746c1bfe41cc 100644
--- a/website/versioned_docs/version-25.x/MockFunctions.md
+++ b/website/versioned_docs/version-25.x/MockFunctions.md
@@ -17,41 +17,49 @@ function forEach(items, callback) {
     callback(items[index]);
   }
 }
+module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```javascript
+```js title="foreach.test.js"
+const forEach = require("./foreach");
+
 const mockCallback = jest.fn(x => 42 + x);
-forEach([0, 1], mockCallback);
 
-// The mock function is called twice
-expect(mockCallback.mock.calls.length).toBe(2);
+test('forEach mock function', () => {
+  forEach([0, 1], mockCallback);
 
-// The first argument of the first call to the function was 0
-expect(mockCallback.mock.calls[0][0]).toBe(0);
+  // The mock function was called twice
+  expect(mockCallback.mock.calls.length).toBe(2);
 
-// The first argument of the second call to the function was 1
-expect(mockCallback.mock.calls[1][0]).toBe(1);
+  // The first argument of the first call to the function was 0
+  expect(mockCallback.mock.calls[0][0]).toBe(0);
 
-// The return value of the first call to the function was 42
-expect(mockCallback.mock.results[0].value).toBe(42);
-```
+  // The first argument of the second call to the function was 1
+  expect(mockCallback.mock.calls[1][0]).toBe(1);
 
+  // The return value of the first call to the function was 42
+  expect(mockCallback.mock.results[0].value).toBe(42);
+  }
+) 
+```
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock = jest.fn();
+const myMock1 = jest.fn();
+const a = new myMock1();
+console.log(myMock1.mock.instances);
+// > [ <a> ]
 
-const a = new myMock();
+const myMock2 = jest.fn();
 const b = {};
-const bound = myMock.bind(b);
+const bound = myMock2.bind(b);
 bound();
-
-console.log(myMock.mock.instances);
-// > [ <a>, <b> ]
+console.log(myMock2.mock.contexts);
+// > [ <b> ]
 ```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
@@ -69,12 +77,18 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
+// The function was called with a certain `this` context: the `element` object.
+expect(someMockFunction.mock.contexts[0]).toBe(element);
+
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 
 // The object returned by the first instantiation of this function
 // had a `name` property whose value was set to 'test'
 expect(someMockFunction.mock.instances[0].name).toBe('test');
+
+// The first argument of the last call to the function was 'test'
+expect(someMockFunction.mock.lastCall[0]).toBe('test');
 ```
 
 ## Mock Return Values
@@ -105,8 +119,8 @@ const result = [11, 12].filter(num => filterTestFn(num));
 
 console.log(result);
 // > [11]
-console.log(filterTestFn.mock.calls);
-// > [ [11], [12] ]
+console.log(filterTestFn.mock.calls[0][0]); // 11
+console.log(filterTestFn.mock.calls[1][0]); // 12
 ```
 
 Most real-world examples actually involve getting ahold of a mock function on a 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.
diff --git a/website/versioned_docs/version-26.x/MockFunctions.md b/website/versioned_docs/version-26.x/MockFunctions.md
index 918fc826a74b..746c1bfe41cc 100644
--- a/website/versioned_docs/version-26.x/MockFunctions.md
+++ b/website/versioned_docs/version-26.x/MockFunctions.md
@@ -17,41 +17,49 @@ function forEach(items, callback) {
     callback(items[index]);
   }
 }
+module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```javascript
+```js title="foreach.test.js"
+const forEach = require("./foreach");
+
 const mockCallback = jest.fn(x => 42 + x);
-forEach([0, 1], mockCallback);
 
-// The mock function is called twice
-expect(mockCallback.mock.calls.length).toBe(2);
+test('forEach mock function', () => {
+  forEach([0, 1], mockCallback);
 
-// The first argument of the first call to the function was 0
-expect(mockCallback.mock.calls[0][0]).toBe(0);
+  // The mock function was called twice
+  expect(mockCallback.mock.calls.length).toBe(2);
 
-// The first argument of the second call to the function was 1
-expect(mockCallback.mock.calls[1][0]).toBe(1);
+  // The first argument of the first call to the function was 0
+  expect(mockCallback.mock.calls[0][0]).toBe(0);
 
-// The return value of the first call to the function was 42
-expect(mockCallback.mock.results[0].value).toBe(42);
-```
+  // The first argument of the second call to the function was 1
+  expect(mockCallback.mock.calls[1][0]).toBe(1);
 
+  // The return value of the first call to the function was 42
+  expect(mockCallback.mock.results[0].value).toBe(42);
+  }
+) 
+```
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock = jest.fn();
+const myMock1 = jest.fn();
+const a = new myMock1();
+console.log(myMock1.mock.instances);
+// > [ <a> ]
 
-const a = new myMock();
+const myMock2 = jest.fn();
 const b = {};
-const bound = myMock.bind(b);
+const bound = myMock2.bind(b);
 bound();
-
-console.log(myMock.mock.instances);
-// > [ <a>, <b> ]
+console.log(myMock2.mock.contexts);
+// > [ <b> ]
 ```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
@@ -69,12 +77,18 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
+// The function was called with a certain `this` context: the `element` object.
+expect(someMockFunction.mock.contexts[0]).toBe(element);
+
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 
 // The object returned by the first instantiation of this function
 // had a `name` property whose value was set to 'test'
 expect(someMockFunction.mock.instances[0].name).toBe('test');
+
+// The first argument of the last call to the function was 'test'
+expect(someMockFunction.mock.lastCall[0]).toBe('test');
 ```
 
 ## Mock Return Values
@@ -105,8 +119,8 @@ const result = [11, 12].filter(num => filterTestFn(num));
 
 console.log(result);
 // > [11]
-console.log(filterTestFn.mock.calls);
-// > [ [11], [12] ]
+console.log(filterTestFn.mock.calls[0][0]); // 11
+console.log(filterTestFn.mock.calls[1][0]); // 12
 ```
 
 Most real-world examples actually involve getting ahold of a mock function on a 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.
diff --git a/website/versioned_docs/version-27.x/MockFunctions.md b/website/versioned_docs/version-27.x/MockFunctions.md
index 66917c956dd0..746c1bfe41cc 100644
--- a/website/versioned_docs/version-27.x/MockFunctions.md
+++ b/website/versioned_docs/version-27.x/MockFunctions.md
@@ -17,41 +17,49 @@ function forEach(items, callback) {
     callback(items[index]);
   }
 }
+module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```javascript
+```js title="foreach.test.js"
+const forEach = require("./foreach");
+
 const mockCallback = jest.fn(x => 42 + x);
-forEach([0, 1], mockCallback);
 
-// The mock function is called twice
-expect(mockCallback.mock.calls.length).toBe(2);
+test('forEach mock function', () => {
+  forEach([0, 1], mockCallback);
 
-// The first argument of the first call to the function was 0
-expect(mockCallback.mock.calls[0][0]).toBe(0);
+  // The mock function was called twice
+  expect(mockCallback.mock.calls.length).toBe(2);
 
-// The first argument of the second call to the function was 1
-expect(mockCallback.mock.calls[1][0]).toBe(1);
+  // The first argument of the first call to the function was 0
+  expect(mockCallback.mock.calls[0][0]).toBe(0);
 
-// The return value of the first call to the function was 42
-expect(mockCallback.mock.results[0].value).toBe(42);
-```
+  // The first argument of the second call to the function was 1
+  expect(mockCallback.mock.calls[1][0]).toBe(1);
 
+  // The return value of the first call to the function was 42
+  expect(mockCallback.mock.results[0].value).toBe(42);
+  }
+) 
+```
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock = jest.fn();
+const myMock1 = jest.fn();
+const a = new myMock1();
+console.log(myMock1.mock.instances);
+// > [ <a> ]
 
-const a = new myMock();
+const myMock2 = jest.fn();
 const b = {};
-const bound = myMock.bind(b);
+const bound = myMock2.bind(b);
 bound();
-
-console.log(myMock.mock.instances);
-// > [ <a>, <b> ]
+console.log(myMock2.mock.contexts);
+// > [ <b> ]
 ```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
@@ -69,6 +77,9 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
+// The function was called with a certain `this` context: the `element` object.
+expect(someMockFunction.mock.contexts[0]).toBe(element);
+
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 
diff --git a/website/versioned_docs/version-28.x/MockFunctions.md b/website/versioned_docs/version-28.x/MockFunctions.md
index 40584bc853d3..746c1bfe41cc 100644
--- a/website/versioned_docs/version-28.x/MockFunctions.md
+++ b/website/versioned_docs/version-28.x/MockFunctions.md
@@ -17,27 +17,33 @@ function forEach(items, callback) {
     callback(items[index]);
   }
 }
+module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```javascript
+```js title="foreach.test.js"
+const forEach = require("./foreach");
+
 const mockCallback = jest.fn(x => 42 + x);
-forEach([0, 1], mockCallback);
 
-// The mock function is called twice
-expect(mockCallback.mock.calls.length).toBe(2);
+test('forEach mock function', () => {
+  forEach([0, 1], mockCallback);
 
-// The first argument of the first call to the function was 0
-expect(mockCallback.mock.calls[0][0]).toBe(0);
+  // The mock function was called twice
+  expect(mockCallback.mock.calls.length).toBe(2);
 
-// The first argument of the second call to the function was 1
-expect(mockCallback.mock.calls[1][0]).toBe(1);
+  // The first argument of the first call to the function was 0
+  expect(mockCallback.mock.calls[0][0]).toBe(0);
 
-// The return value of the first call to the function was 42
-expect(mockCallback.mock.results[0].value).toBe(42);
-```
+  // The first argument of the second call to the function was 1
+  expect(mockCallback.mock.calls[1][0]).toBe(1);
 
+  // The return value of the first call to the function was 42
+  expect(mockCallback.mock.results[0].value).toBe(42);
+  }
+) 
+```
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
diff --git a/website/versioned_docs/version-29.2/MockFunctions.md b/website/versioned_docs/version-29.2/MockFunctions.md
index 40584bc853d3..746c1bfe41cc 100644
--- a/website/versioned_docs/version-29.2/MockFunctions.md
+++ b/website/versioned_docs/version-29.2/MockFunctions.md
@@ -17,27 +17,33 @@ function forEach(items, callback) {
     callback(items[index]);
   }
 }
+module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```javascript
+```js title="foreach.test.js"
+const forEach = require("./foreach");
+
 const mockCallback = jest.fn(x => 42 + x);
-forEach([0, 1], mockCallback);
 
-// The mock function is called twice
-expect(mockCallback.mock.calls.length).toBe(2);
+test('forEach mock function', () => {
+  forEach([0, 1], mockCallback);
 
-// The first argument of the first call to the function was 0
-expect(mockCallback.mock.calls[0][0]).toBe(0);
+  // The mock function was called twice
+  expect(mockCallback.mock.calls.length).toBe(2);
 
-// The first argument of the second call to the function was 1
-expect(mockCallback.mock.calls[1][0]).toBe(1);
+  // The first argument of the first call to the function was 0
+  expect(mockCallback.mock.calls[0][0]).toBe(0);
 
-// The return value of the first call to the function was 42
-expect(mockCallback.mock.results[0].value).toBe(42);
-```
+  // The first argument of the second call to the function was 1
+  expect(mockCallback.mock.calls[1][0]).toBe(1);
 
+  // The return value of the first call to the function was 42
+  expect(mockCallback.mock.results[0].value).toBe(42);
+  }
+) 
+```
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
diff --git a/website/versioned_docs/version-29.3/MockFunctions.md b/website/versioned_docs/version-29.3/MockFunctions.md
index 40584bc853d3..746c1bfe41cc 100644
--- a/website/versioned_docs/version-29.3/MockFunctions.md
+++ b/website/versioned_docs/version-29.3/MockFunctions.md
@@ -17,27 +17,33 @@ function forEach(items, callback) {
     callback(items[index]);
   }
 }
+module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```javascript
+```js title="foreach.test.js"
+const forEach = require("./foreach");
+
 const mockCallback = jest.fn(x => 42 + x);
-forEach([0, 1], mockCallback);
 
-// The mock function is called twice
-expect(mockCallback.mock.calls.length).toBe(2);
+test('forEach mock function', () => {
+  forEach([0, 1], mockCallback);
 
-// The first argument of the first call to the function was 0
-expect(mockCallback.mock.calls[0][0]).toBe(0);
+  // The mock function was called twice
+  expect(mockCallback.mock.calls.length).toBe(2);
 
-// The first argument of the second call to the function was 1
-expect(mockCallback.mock.calls[1][0]).toBe(1);
+  // The first argument of the first call to the function was 0
+  expect(mockCallback.mock.calls[0][0]).toBe(0);
 
-// The return value of the first call to the function was 42
-expect(mockCallback.mock.results[0].value).toBe(42);
-```
+  // The first argument of the second call to the function was 1
+  expect(mockCallback.mock.calls[1][0]).toBe(1);
 
+  // The return value of the first call to the function was 42
+  expect(mockCallback.mock.results[0].value).toBe(42);
+  }
+) 
+```
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:

From 9398746639f5a1e9209ea4564e7ffad6d9aaf37a Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Thu, 15 Dec 2022 11:12:21 +0100
Subject: [PATCH 05/34] single quotes

---
 website/versioned_docs/version-25.x/MockFunctions.md | 2 +-
 website/versioned_docs/version-26.x/MockFunctions.md | 2 +-
 website/versioned_docs/version-27.x/MockFunctions.md | 2 +-
 website/versioned_docs/version-28.x/MockFunctions.md | 2 +-
 website/versioned_docs/version-29.1/MockFunctions.md | 2 +-
 website/versioned_docs/version-29.2/MockFunctions.md | 2 +-
 website/versioned_docs/version-29.3/MockFunctions.md | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/website/versioned_docs/version-25.x/MockFunctions.md b/website/versioned_docs/version-25.x/MockFunctions.md
index 746c1bfe41cc..1d13cae44539 100644
--- a/website/versioned_docs/version-25.x/MockFunctions.md
+++ b/website/versioned_docs/version-25.x/MockFunctions.md
@@ -23,7 +23,7 @@ module.exports = forEach;
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
 ```js title="foreach.test.js"
-const forEach = require("./foreach");
+const forEach = require('./foreach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
diff --git a/website/versioned_docs/version-26.x/MockFunctions.md b/website/versioned_docs/version-26.x/MockFunctions.md
index 746c1bfe41cc..1d13cae44539 100644
--- a/website/versioned_docs/version-26.x/MockFunctions.md
+++ b/website/versioned_docs/version-26.x/MockFunctions.md
@@ -23,7 +23,7 @@ module.exports = forEach;
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
 ```js title="foreach.test.js"
-const forEach = require("./foreach");
+const forEach = require('./foreach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
diff --git a/website/versioned_docs/version-27.x/MockFunctions.md b/website/versioned_docs/version-27.x/MockFunctions.md
index 746c1bfe41cc..1d13cae44539 100644
--- a/website/versioned_docs/version-27.x/MockFunctions.md
+++ b/website/versioned_docs/version-27.x/MockFunctions.md
@@ -23,7 +23,7 @@ module.exports = forEach;
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
 ```js title="foreach.test.js"
-const forEach = require("./foreach");
+const forEach = require('./foreach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
diff --git a/website/versioned_docs/version-28.x/MockFunctions.md b/website/versioned_docs/version-28.x/MockFunctions.md
index 746c1bfe41cc..1d13cae44539 100644
--- a/website/versioned_docs/version-28.x/MockFunctions.md
+++ b/website/versioned_docs/version-28.x/MockFunctions.md
@@ -23,7 +23,7 @@ module.exports = forEach;
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
 ```js title="foreach.test.js"
-const forEach = require("./foreach");
+const forEach = require('./foreach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
diff --git a/website/versioned_docs/version-29.1/MockFunctions.md b/website/versioned_docs/version-29.1/MockFunctions.md
index 746c1bfe41cc..1d13cae44539 100644
--- a/website/versioned_docs/version-29.1/MockFunctions.md
+++ b/website/versioned_docs/version-29.1/MockFunctions.md
@@ -23,7 +23,7 @@ module.exports = forEach;
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
 ```js title="foreach.test.js"
-const forEach = require("./foreach");
+const forEach = require('./foreach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
diff --git a/website/versioned_docs/version-29.2/MockFunctions.md b/website/versioned_docs/version-29.2/MockFunctions.md
index 746c1bfe41cc..1d13cae44539 100644
--- a/website/versioned_docs/version-29.2/MockFunctions.md
+++ b/website/versioned_docs/version-29.2/MockFunctions.md
@@ -23,7 +23,7 @@ module.exports = forEach;
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
 ```js title="foreach.test.js"
-const forEach = require("./foreach");
+const forEach = require('./foreach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
diff --git a/website/versioned_docs/version-29.3/MockFunctions.md b/website/versioned_docs/version-29.3/MockFunctions.md
index 746c1bfe41cc..1d13cae44539 100644
--- a/website/versioned_docs/version-29.3/MockFunctions.md
+++ b/website/versioned_docs/version-29.3/MockFunctions.md
@@ -23,7 +23,7 @@ module.exports = forEach;
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
 ```js title="foreach.test.js"
-const forEach = require("./foreach");
+const forEach = require('./foreach');
 
 const mockCallback = jest.fn(x => 42 + x);
 

From 4753f97079845dfca8ede1fe95bbd514804c13e5 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Thu, 15 Dec 2022 14:38:01 +0100
Subject: [PATCH 06/34] basic working example

---
 .../version-29.0/MockFunctions.md             | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/website/versioned_docs/version-29.0/MockFunctions.md b/website/versioned_docs/version-29.0/MockFunctions.md
index 40584bc853d3..08e66207bc5e 100644
--- a/website/versioned_docs/version-29.0/MockFunctions.md
+++ b/website/versioned_docs/version-29.0/MockFunctions.md
@@ -17,27 +17,33 @@ function forEach(items, callback) {
     callback(items[index]);
   }
 }
+module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```javascript
+```js title="foreach.test.js"
+const forEach = require('./foreach');
+
 const mockCallback = jest.fn(x => 42 + x);
-forEach([0, 1], mockCallback);
 
-// The mock function is called twice
-expect(mockCallback.mock.calls.length).toBe(2);
+test('forEach mock function', () => {
+  forEach([0, 1], mockCallback);
 
-// The first argument of the first call to the function was 0
-expect(mockCallback.mock.calls[0][0]).toBe(0);
+  // The mock function was called twice
+  expect(mockCallback.mock.calls).toHaveLength(2);
 
-// The first argument of the second call to the function was 1
-expect(mockCallback.mock.calls[1][0]).toBe(1);
+  // The first argument of the first call to the function was 0
+  expect(mockCallback.mock.calls[0][0]).toBe(0);
 
-// The return value of the first call to the function was 42
-expect(mockCallback.mock.results[0].value).toBe(42);
-```
+  // The first argument of the second call to the function was 1
+  expect(mockCallback.mock.calls[1][0]).toBe(1);
 
+  // The return value of the first call to the function was 42
+  expect(mockCallback.mock.results[0].value).toBe(42);
+  }
+) 
+```
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:

From 01bf339753a4355d19319c7f48c44ed50117724f Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Thu, 15 Dec 2022 21:53:31 +0100
Subject: [PATCH 07/34] .toHaveLength()

---
 website/versioned_docs/version-25.x/MockFunctions.md | 2 +-
 website/versioned_docs/version-26.x/MockFunctions.md | 2 +-
 website/versioned_docs/version-27.x/MockFunctions.md | 2 +-
 website/versioned_docs/version-28.x/MockFunctions.md | 2 +-
 website/versioned_docs/version-29.1/MockFunctions.md | 2 +-
 website/versioned_docs/version-29.2/MockFunctions.md | 2 +-
 website/versioned_docs/version-29.3/MockFunctions.md | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/website/versioned_docs/version-25.x/MockFunctions.md b/website/versioned_docs/version-25.x/MockFunctions.md
index 1d13cae44539..08e66207bc5e 100644
--- a/website/versioned_docs/version-25.x/MockFunctions.md
+++ b/website/versioned_docs/version-25.x/MockFunctions.md
@@ -31,7 +31,7 @@ test('forEach mock function', () => {
   forEach([0, 1], mockCallback);
 
   // The mock function was called twice
-  expect(mockCallback.mock.calls.length).toBe(2);
+  expect(mockCallback.mock.calls).toHaveLength(2);
 
   // The first argument of the first call to the function was 0
   expect(mockCallback.mock.calls[0][0]).toBe(0);
diff --git a/website/versioned_docs/version-26.x/MockFunctions.md b/website/versioned_docs/version-26.x/MockFunctions.md
index 1d13cae44539..08e66207bc5e 100644
--- a/website/versioned_docs/version-26.x/MockFunctions.md
+++ b/website/versioned_docs/version-26.x/MockFunctions.md
@@ -31,7 +31,7 @@ test('forEach mock function', () => {
   forEach([0, 1], mockCallback);
 
   // The mock function was called twice
-  expect(mockCallback.mock.calls.length).toBe(2);
+  expect(mockCallback.mock.calls).toHaveLength(2);
 
   // The first argument of the first call to the function was 0
   expect(mockCallback.mock.calls[0][0]).toBe(0);
diff --git a/website/versioned_docs/version-27.x/MockFunctions.md b/website/versioned_docs/version-27.x/MockFunctions.md
index 1d13cae44539..08e66207bc5e 100644
--- a/website/versioned_docs/version-27.x/MockFunctions.md
+++ b/website/versioned_docs/version-27.x/MockFunctions.md
@@ -31,7 +31,7 @@ test('forEach mock function', () => {
   forEach([0, 1], mockCallback);
 
   // The mock function was called twice
-  expect(mockCallback.mock.calls.length).toBe(2);
+  expect(mockCallback.mock.calls).toHaveLength(2);
 
   // The first argument of the first call to the function was 0
   expect(mockCallback.mock.calls[0][0]).toBe(0);
diff --git a/website/versioned_docs/version-28.x/MockFunctions.md b/website/versioned_docs/version-28.x/MockFunctions.md
index 1d13cae44539..08e66207bc5e 100644
--- a/website/versioned_docs/version-28.x/MockFunctions.md
+++ b/website/versioned_docs/version-28.x/MockFunctions.md
@@ -31,7 +31,7 @@ test('forEach mock function', () => {
   forEach([0, 1], mockCallback);
 
   // The mock function was called twice
-  expect(mockCallback.mock.calls.length).toBe(2);
+  expect(mockCallback.mock.calls).toHaveLength(2);
 
   // The first argument of the first call to the function was 0
   expect(mockCallback.mock.calls[0][0]).toBe(0);
diff --git a/website/versioned_docs/version-29.1/MockFunctions.md b/website/versioned_docs/version-29.1/MockFunctions.md
index 1d13cae44539..08e66207bc5e 100644
--- a/website/versioned_docs/version-29.1/MockFunctions.md
+++ b/website/versioned_docs/version-29.1/MockFunctions.md
@@ -31,7 +31,7 @@ test('forEach mock function', () => {
   forEach([0, 1], mockCallback);
 
   // The mock function was called twice
-  expect(mockCallback.mock.calls.length).toBe(2);
+  expect(mockCallback.mock.calls).toHaveLength(2);
 
   // The first argument of the first call to the function was 0
   expect(mockCallback.mock.calls[0][0]).toBe(0);
diff --git a/website/versioned_docs/version-29.2/MockFunctions.md b/website/versioned_docs/version-29.2/MockFunctions.md
index 1d13cae44539..08e66207bc5e 100644
--- a/website/versioned_docs/version-29.2/MockFunctions.md
+++ b/website/versioned_docs/version-29.2/MockFunctions.md
@@ -31,7 +31,7 @@ test('forEach mock function', () => {
   forEach([0, 1], mockCallback);
 
   // The mock function was called twice
-  expect(mockCallback.mock.calls.length).toBe(2);
+  expect(mockCallback.mock.calls).toHaveLength(2);
 
   // The first argument of the first call to the function was 0
   expect(mockCallback.mock.calls[0][0]).toBe(0);
diff --git a/website/versioned_docs/version-29.3/MockFunctions.md b/website/versioned_docs/version-29.3/MockFunctions.md
index 1d13cae44539..08e66207bc5e 100644
--- a/website/versioned_docs/version-29.3/MockFunctions.md
+++ b/website/versioned_docs/version-29.3/MockFunctions.md
@@ -31,7 +31,7 @@ test('forEach mock function', () => {
   forEach([0, 1], mockCallback);
 
   // The mock function was called twice
-  expect(mockCallback.mock.calls.length).toBe(2);
+  expect(mockCallback.mock.calls).toHaveLength(2);
 
   // The first argument of the first call to the function was 0
   expect(mockCallback.mock.calls[0][0]).toBe(0);

From 5ae1f95e38dc52ea5d96732cb3b23ed47d9c8339 Mon Sep 17 00:00:00 2001
From: Jeroendevr <jeroendevries@runbox.eu>
Date: Fri, 16 Dec 2022 14:55:06 +0100
Subject: [PATCH 08/34] Update
 website/versioned_docs/version-25.x/MockFunctions.md

Co-authored-by: Tom Mrazauskas <tom@mrazauskas.de>
---
 website/versioned_docs/version-25.x/MockFunctions.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/versioned_docs/version-25.x/MockFunctions.md b/website/versioned_docs/version-25.x/MockFunctions.md
index 08e66207bc5e..273b9175934b 100644
--- a/website/versioned_docs/version-25.x/MockFunctions.md
+++ b/website/versioned_docs/version-25.x/MockFunctions.md
@@ -27,7 +27,7 @@ const forEach = require('./foreach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
-test('forEach mock function', () => {
+test('forEach function', () => {
   forEach([0, 1], mockCallback);
 
   // The mock function was called twice

From ebc61120eb8b5856a1a004c38f6e35d204902aa1 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Fri, 16 Dec 2022 15:00:58 +0100
Subject: [PATCH 09/34] also update docs main dir + prettier lint

---
 docs/MockFunctions.md                         | 26 ++++++++++++-------
 .../version-25.x/MockFunctions.md             |  7 ++---
 .../version-26.x/MockFunctions.md             |  4 +--
 .../version-27.x/MockFunctions.md             |  4 +--
 .../version-28.x/MockFunctions.md             |  4 +--
 .../version-29.0/MockFunctions.md             |  4 +--
 .../version-29.1/MockFunctions.md             |  4 +--
 .../version-29.2/MockFunctions.md             |  4 +--
 .../version-29.3/MockFunctions.md             |  4 +--
 9 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/docs/MockFunctions.md b/docs/MockFunctions.md
index 40584bc853d3..7bfbad107aee 100644
--- a/docs/MockFunctions.md
+++ b/docs/MockFunctions.md
@@ -17,25 +17,31 @@ function forEach(items, callback) {
     callback(items[index]);
   }
 }
+module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```javascript
+```js title="foreach.test.js"
+const forEach = require('./foreach');
+
 const mockCallback = jest.fn(x => 42 + x);
-forEach([0, 1], mockCallback);
 
-// The mock function is called twice
-expect(mockCallback.mock.calls.length).toBe(2);
+test('forEach mock function', () => {
+  forEach([0, 1], mockCallback);
 
-// The first argument of the first call to the function was 0
-expect(mockCallback.mock.calls[0][0]).toBe(0);
+  // The mock function was called twice
+  expect(mockCallback.mock.calls).toHaveLength(2);
 
-// The first argument of the second call to the function was 1
-expect(mockCallback.mock.calls[1][0]).toBe(1);
+  // The first argument of the first call to the function was 0
+  expect(mockCallback.mock.calls[0][0]).toBe(0);
 
-// The return value of the first call to the function was 42
-expect(mockCallback.mock.results[0].value).toBe(42);
+  // The first argument of the second call to the function was 1
+  expect(mockCallback.mock.calls[1][0]).toBe(1);
+
+  // The return value of the first call to the function was 42
+  expect(mockCallback.mock.results[0].value).toBe(42);
+});
 ```
 
 ## `.mock` property
diff --git a/website/versioned_docs/version-25.x/MockFunctions.md b/website/versioned_docs/version-25.x/MockFunctions.md
index 273b9175934b..98ff19969e85 100644
--- a/website/versioned_docs/version-25.x/MockFunctions.md
+++ b/website/versioned_docs/version-25.x/MockFunctions.md
@@ -41,9 +41,9 @@ test('forEach function', () => {
 
   // The return value of the first call to the function was 42
   expect(mockCallback.mock.results[0].value).toBe(42);
-  }
-) 
+});
 ```
+
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
@@ -77,9 +77,6 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
-// The function was called with a certain `this` context: the `element` object.
-expect(someMockFunction.mock.contexts[0]).toBe(element);
-
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 
diff --git a/website/versioned_docs/version-26.x/MockFunctions.md b/website/versioned_docs/version-26.x/MockFunctions.md
index 08e66207bc5e..7bfbad107aee 100644
--- a/website/versioned_docs/version-26.x/MockFunctions.md
+++ b/website/versioned_docs/version-26.x/MockFunctions.md
@@ -41,9 +41,9 @@ test('forEach mock function', () => {
 
   // The return value of the first call to the function was 42
   expect(mockCallback.mock.results[0].value).toBe(42);
-  }
-) 
+});
 ```
+
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
diff --git a/website/versioned_docs/version-27.x/MockFunctions.md b/website/versioned_docs/version-27.x/MockFunctions.md
index 08e66207bc5e..7bfbad107aee 100644
--- a/website/versioned_docs/version-27.x/MockFunctions.md
+++ b/website/versioned_docs/version-27.x/MockFunctions.md
@@ -41,9 +41,9 @@ test('forEach mock function', () => {
 
   // The return value of the first call to the function was 42
   expect(mockCallback.mock.results[0].value).toBe(42);
-  }
-) 
+});
 ```
+
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
diff --git a/website/versioned_docs/version-28.x/MockFunctions.md b/website/versioned_docs/version-28.x/MockFunctions.md
index 08e66207bc5e..7bfbad107aee 100644
--- a/website/versioned_docs/version-28.x/MockFunctions.md
+++ b/website/versioned_docs/version-28.x/MockFunctions.md
@@ -41,9 +41,9 @@ test('forEach mock function', () => {
 
   // The return value of the first call to the function was 42
   expect(mockCallback.mock.results[0].value).toBe(42);
-  }
-) 
+});
 ```
+
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
diff --git a/website/versioned_docs/version-29.0/MockFunctions.md b/website/versioned_docs/version-29.0/MockFunctions.md
index 08e66207bc5e..7bfbad107aee 100644
--- a/website/versioned_docs/version-29.0/MockFunctions.md
+++ b/website/versioned_docs/version-29.0/MockFunctions.md
@@ -41,9 +41,9 @@ test('forEach mock function', () => {
 
   // The return value of the first call to the function was 42
   expect(mockCallback.mock.results[0].value).toBe(42);
-  }
-) 
+});
 ```
+
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
diff --git a/website/versioned_docs/version-29.1/MockFunctions.md b/website/versioned_docs/version-29.1/MockFunctions.md
index 08e66207bc5e..7bfbad107aee 100644
--- a/website/versioned_docs/version-29.1/MockFunctions.md
+++ b/website/versioned_docs/version-29.1/MockFunctions.md
@@ -41,9 +41,9 @@ test('forEach mock function', () => {
 
   // The return value of the first call to the function was 42
   expect(mockCallback.mock.results[0].value).toBe(42);
-  }
-) 
+});
 ```
+
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
diff --git a/website/versioned_docs/version-29.2/MockFunctions.md b/website/versioned_docs/version-29.2/MockFunctions.md
index 08e66207bc5e..7bfbad107aee 100644
--- a/website/versioned_docs/version-29.2/MockFunctions.md
+++ b/website/versioned_docs/version-29.2/MockFunctions.md
@@ -41,9 +41,9 @@ test('forEach mock function', () => {
 
   // The return value of the first call to the function was 42
   expect(mockCallback.mock.results[0].value).toBe(42);
-  }
-) 
+});
 ```
+
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
diff --git a/website/versioned_docs/version-29.3/MockFunctions.md b/website/versioned_docs/version-29.3/MockFunctions.md
index 08e66207bc5e..7bfbad107aee 100644
--- a/website/versioned_docs/version-29.3/MockFunctions.md
+++ b/website/versioned_docs/version-29.3/MockFunctions.md
@@ -41,9 +41,9 @@ test('forEach mock function', () => {
 
   // The return value of the first call to the function was 42
   expect(mockCallback.mock.results[0].value).toBe(42);
-  }
-) 
+});
 ```
+
 ## `.mock` property
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:

From 544a9c7419ec854d4551c34d618908ab39f164c0 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Fri, 16 Dec 2022 15:08:38 +0100
Subject: [PATCH 10/34] Calls.length -> toHaveLength()

---
 website/versioned_docs/version-25.x/MockFunctions.md | 2 +-
 website/versioned_docs/version-26.x/MockFunctions.md | 5 +----
 website/versioned_docs/version-27.x/MockFunctions.md | 5 +----
 website/versioned_docs/version-28.x/MockFunctions.md | 5 +----
 website/versioned_docs/version-29.0/MockFunctions.md | 5 +----
 website/versioned_docs/version-29.1/MockFunctions.md | 5 +----
 website/versioned_docs/version-29.2/MockFunctions.md | 5 +----
 website/versioned_docs/version-29.3/MockFunctions.md | 5 +----
 8 files changed, 8 insertions(+), 29 deletions(-)

diff --git a/website/versioned_docs/version-25.x/MockFunctions.md b/website/versioned_docs/version-25.x/MockFunctions.md
index 98ff19969e85..91d7f11c35de 100644
--- a/website/versioned_docs/version-25.x/MockFunctions.md
+++ b/website/versioned_docs/version-25.x/MockFunctions.md
@@ -66,7 +66,7 @@ These mock members are very useful in tests to assert how these functions get ca
 
 ```javascript
 // The function was called exactly once
-expect(someMockFunction.mock.calls.length).toBe(1);
+expect(someMockFunction.mock.calls).toHaveLength(1);
 
 // The first arg of the first call to the function was 'first arg'
 expect(someMockFunction.mock.calls[0][0]).toBe('first arg');
diff --git a/website/versioned_docs/version-26.x/MockFunctions.md b/website/versioned_docs/version-26.x/MockFunctions.md
index 7bfbad107aee..b225a0774986 100644
--- a/website/versioned_docs/version-26.x/MockFunctions.md
+++ b/website/versioned_docs/version-26.x/MockFunctions.md
@@ -66,7 +66,7 @@ These mock members are very useful in tests to assert how these functions get ca
 
 ```javascript
 // The function was called exactly once
-expect(someMockFunction.mock.calls.length).toBe(1);
+expect(someMockFunction.mock.calls).toHaveLength(1);
 
 // The first arg of the first call to the function was 'first arg'
 expect(someMockFunction.mock.calls[0][0]).toBe('first arg');
@@ -77,9 +77,6 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
-// The function was called with a certain `this` context: the `element` object.
-expect(someMockFunction.mock.contexts[0]).toBe(element);
-
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 
diff --git a/website/versioned_docs/version-27.x/MockFunctions.md b/website/versioned_docs/version-27.x/MockFunctions.md
index 7bfbad107aee..b225a0774986 100644
--- a/website/versioned_docs/version-27.x/MockFunctions.md
+++ b/website/versioned_docs/version-27.x/MockFunctions.md
@@ -66,7 +66,7 @@ These mock members are very useful in tests to assert how these functions get ca
 
 ```javascript
 // The function was called exactly once
-expect(someMockFunction.mock.calls.length).toBe(1);
+expect(someMockFunction.mock.calls).toHaveLength(1);
 
 // The first arg of the first call to the function was 'first arg'
 expect(someMockFunction.mock.calls[0][0]).toBe('first arg');
@@ -77,9 +77,6 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
-// The function was called with a certain `this` context: the `element` object.
-expect(someMockFunction.mock.contexts[0]).toBe(element);
-
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 
diff --git a/website/versioned_docs/version-28.x/MockFunctions.md b/website/versioned_docs/version-28.x/MockFunctions.md
index 7bfbad107aee..b225a0774986 100644
--- a/website/versioned_docs/version-28.x/MockFunctions.md
+++ b/website/versioned_docs/version-28.x/MockFunctions.md
@@ -66,7 +66,7 @@ These mock members are very useful in tests to assert how these functions get ca
 
 ```javascript
 // The function was called exactly once
-expect(someMockFunction.mock.calls.length).toBe(1);
+expect(someMockFunction.mock.calls).toHaveLength(1);
 
 // The first arg of the first call to the function was 'first arg'
 expect(someMockFunction.mock.calls[0][0]).toBe('first arg');
@@ -77,9 +77,6 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
-// The function was called with a certain `this` context: the `element` object.
-expect(someMockFunction.mock.contexts[0]).toBe(element);
-
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 
diff --git a/website/versioned_docs/version-29.0/MockFunctions.md b/website/versioned_docs/version-29.0/MockFunctions.md
index 7bfbad107aee..b225a0774986 100644
--- a/website/versioned_docs/version-29.0/MockFunctions.md
+++ b/website/versioned_docs/version-29.0/MockFunctions.md
@@ -66,7 +66,7 @@ These mock members are very useful in tests to assert how these functions get ca
 
 ```javascript
 // The function was called exactly once
-expect(someMockFunction.mock.calls.length).toBe(1);
+expect(someMockFunction.mock.calls).toHaveLength(1);
 
 // The first arg of the first call to the function was 'first arg'
 expect(someMockFunction.mock.calls[0][0]).toBe('first arg');
@@ -77,9 +77,6 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
-// The function was called with a certain `this` context: the `element` object.
-expect(someMockFunction.mock.contexts[0]).toBe(element);
-
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 
diff --git a/website/versioned_docs/version-29.1/MockFunctions.md b/website/versioned_docs/version-29.1/MockFunctions.md
index 7bfbad107aee..b225a0774986 100644
--- a/website/versioned_docs/version-29.1/MockFunctions.md
+++ b/website/versioned_docs/version-29.1/MockFunctions.md
@@ -66,7 +66,7 @@ These mock members are very useful in tests to assert how these functions get ca
 
 ```javascript
 // The function was called exactly once
-expect(someMockFunction.mock.calls.length).toBe(1);
+expect(someMockFunction.mock.calls).toHaveLength(1);
 
 // The first arg of the first call to the function was 'first arg'
 expect(someMockFunction.mock.calls[0][0]).toBe('first arg');
@@ -77,9 +77,6 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
-// The function was called with a certain `this` context: the `element` object.
-expect(someMockFunction.mock.contexts[0]).toBe(element);
-
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 
diff --git a/website/versioned_docs/version-29.2/MockFunctions.md b/website/versioned_docs/version-29.2/MockFunctions.md
index 7bfbad107aee..b225a0774986 100644
--- a/website/versioned_docs/version-29.2/MockFunctions.md
+++ b/website/versioned_docs/version-29.2/MockFunctions.md
@@ -66,7 +66,7 @@ These mock members are very useful in tests to assert how these functions get ca
 
 ```javascript
 // The function was called exactly once
-expect(someMockFunction.mock.calls.length).toBe(1);
+expect(someMockFunction.mock.calls).toHaveLength(1);
 
 // The first arg of the first call to the function was 'first arg'
 expect(someMockFunction.mock.calls[0][0]).toBe('first arg');
@@ -77,9 +77,6 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
-// The function was called with a certain `this` context: the `element` object.
-expect(someMockFunction.mock.contexts[0]).toBe(element);
-
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 
diff --git a/website/versioned_docs/version-29.3/MockFunctions.md b/website/versioned_docs/version-29.3/MockFunctions.md
index 7bfbad107aee..b225a0774986 100644
--- a/website/versioned_docs/version-29.3/MockFunctions.md
+++ b/website/versioned_docs/version-29.3/MockFunctions.md
@@ -66,7 +66,7 @@ These mock members are very useful in tests to assert how these functions get ca
 
 ```javascript
 // The function was called exactly once
-expect(someMockFunction.mock.calls.length).toBe(1);
+expect(someMockFunction.mock.calls).toHaveLength(1);
 
 // The first arg of the first call to the function was 'first arg'
 expect(someMockFunction.mock.calls[0][0]).toBe('first arg');
@@ -77,9 +77,6 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
-// The function was called with a certain `this` context: the `element` object.
-expect(someMockFunction.mock.contexts[0]).toBe(element);
-
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 

From 05cca48c0b99f84c13201e907828e404a30f9a58 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Fri, 16 Dec 2022 16:23:24 +0100
Subject: [PATCH 11/34] ESM Syntax

---
 website/versioned_docs/version-25.x/MockFunctions.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/website/versioned_docs/version-25.x/MockFunctions.md b/website/versioned_docs/version-25.x/MockFunctions.md
index 91d7f11c35de..602c4be4058e 100644
--- a/website/versioned_docs/version-25.x/MockFunctions.md
+++ b/website/versioned_docs/version-25.x/MockFunctions.md
@@ -12,18 +12,17 @@ There are two ways to mock functions: Either by creating a mock function to use
 Let's imagine we're testing an implementation of a function `forEach`, which invokes a callback for each item in a supplied array.
 
 ```javascript
-function forEach(items, callback) {
+export function forEach(items, callback) {
   for (let index = 0; index < items.length; index++) {
     callback(items[index]);
   }
 }
-module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
 ```js title="foreach.test.js"
-const forEach = require('./foreach');
+import {forEach} from './forEach';
 
 const mockCallback = jest.fn(x => 42 + x);
 

From 5bd950fcfb66952540b9a40f6721f804878d8737 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Fri, 16 Dec 2022 20:15:41 +0100
Subject: [PATCH 12/34] change title to forEach

---
 website/versioned_docs/version-25.x/MockFunctions.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/versioned_docs/version-25.x/MockFunctions.md b/website/versioned_docs/version-25.x/MockFunctions.md
index 602c4be4058e..a915641b8034 100644
--- a/website/versioned_docs/version-25.x/MockFunctions.md
+++ b/website/versioned_docs/version-25.x/MockFunctions.md
@@ -11,7 +11,7 @@ There are two ways to mock functions: Either by creating a mock function to use
 
 Let's imagine we're testing an implementation of a function `forEach`, which invokes a callback for each item in a supplied array.
 
-```javascript
+```js title="forEach.js"
 export function forEach(items, callback) {
   for (let index = 0; index < items.length; index++) {
     callback(items[index]);
@@ -21,7 +21,7 @@ export function forEach(items, callback) {
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```js title="foreach.test.js"
+```js title="forEach.test.js"
 import {forEach} from './forEach';
 
 const mockCallback = jest.fn(x => 42 + x);

From c98ed6486d2e5ad6729c0a45bd272bcf9a0ee11e Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Fri, 16 Dec 2022 20:23:34 +0100
Subject: [PATCH 13/34] undo unmeant doc changes to v25

---
 .../version-25.x/MockFunctions.md             | 20 +++++++------------
 .../version-26.x/MockFunctions.md             |  3 ---
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/website/versioned_docs/version-25.x/MockFunctions.md b/website/versioned_docs/version-25.x/MockFunctions.md
index a915641b8034..c04cfce3f190 100644
--- a/website/versioned_docs/version-25.x/MockFunctions.md
+++ b/website/versioned_docs/version-25.x/MockFunctions.md
@@ -49,16 +49,13 @@ All mock functions have this special `.mock` property, which is where data about
 
 ```javascript
 const myMock1 = jest.fn();
-const a = new myMock1();
-console.log(myMock1.mock.instances);
-// > [ <a> ]
-
-const myMock2 = jest.fn();
+const myMock = jest.fn();
+const a = new myMock();
 const b = {};
-const bound = myMock2.bind(b);
+const bound = myMock.bind(b);
 bound();
-console.log(myMock2.mock.contexts);
-// > [ <b> ]
+console.log(myMock.mock.instances);
+// > [ <a>, <b> ]
 ```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
@@ -82,9 +79,6 @@ expect(someMockFunction.mock.instances.length).toBe(2);
 // The object returned by the first instantiation of this function
 // had a `name` property whose value was set to 'test'
 expect(someMockFunction.mock.instances[0].name).toBe('test');
-
-// The first argument of the last call to the function was 'test'
-expect(someMockFunction.mock.lastCall[0]).toBe('test');
 ```
 
 ## Mock Return Values
@@ -115,8 +109,8 @@ const result = [11, 12].filter(num => filterTestFn(num));
 
 console.log(result);
 // > [11]
-console.log(filterTestFn.mock.calls[0][0]); // 11
-console.log(filterTestFn.mock.calls[1][0]); // 12
+console.log(filterTestFn.mock.calls);
+ // > [ [11], [12] ]
 ```
 
 Most real-world examples actually involve getting ahold of a mock function on a 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.
diff --git a/website/versioned_docs/version-26.x/MockFunctions.md b/website/versioned_docs/version-26.x/MockFunctions.md
index b225a0774986..484f80ad1800 100644
--- a/website/versioned_docs/version-26.x/MockFunctions.md
+++ b/website/versioned_docs/version-26.x/MockFunctions.md
@@ -83,9 +83,6 @@ expect(someMockFunction.mock.instances.length).toBe(2);
 // The object returned by the first instantiation of this function
 // had a `name` property whose value was set to 'test'
 expect(someMockFunction.mock.instances[0].name).toBe('test');
-
-// The first argument of the last call to the function was 'test'
-expect(someMockFunction.mock.lastCall[0]).toBe('test');
 ```
 
 ## Mock Return Values

From 1222c5d93d7268ed5d688b9e520c784ac03310ab Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Fri, 16 Dec 2022 20:24:46 +0100
Subject: [PATCH 14/34] remove mymock1

---
 website/versioned_docs/version-25.x/MockFunctions.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/versioned_docs/version-25.x/MockFunctions.md b/website/versioned_docs/version-25.x/MockFunctions.md
index c04cfce3f190..868946b05324 100644
--- a/website/versioned_docs/version-25.x/MockFunctions.md
+++ b/website/versioned_docs/version-25.x/MockFunctions.md
@@ -48,7 +48,6 @@ test('forEach function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock1 = jest.fn();
 const myMock = jest.fn();
 const a = new myMock();
 const b = {};

From 988db29add7b83bc9de0d8a128d5b007997ad756 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Fri, 16 Dec 2022 20:25:10 +0100
Subject: [PATCH 15/34] space

---
 website/versioned_docs/version-25.x/MockFunctions.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/versioned_docs/version-25.x/MockFunctions.md b/website/versioned_docs/version-25.x/MockFunctions.md
index 868946b05324..5eaf681faa9c 100644
--- a/website/versioned_docs/version-25.x/MockFunctions.md
+++ b/website/versioned_docs/version-25.x/MockFunctions.md
@@ -109,7 +109,7 @@ const result = [11, 12].filter(num => filterTestFn(num));
 console.log(result);
 // > [11]
 console.log(filterTestFn.mock.calls);
- // > [ [11], [12] ]
+// > [ [11], [12] ]
 ```
 
 Most real-world examples actually involve getting ahold of a mock function on a 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.

From 2414a55b49947553388358c30882ee0bcdcde3bb Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Mon, 19 Dec 2022 11:02:09 +0100
Subject: [PATCH 16/34] Empty lines undov25

---
 website/versioned_docs/version-25.x/MockFunctions.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/website/versioned_docs/version-25.x/MockFunctions.md b/website/versioned_docs/version-25.x/MockFunctions.md
index 5eaf681faa9c..974fc126ba41 100644
--- a/website/versioned_docs/version-25.x/MockFunctions.md
+++ b/website/versioned_docs/version-25.x/MockFunctions.md
@@ -49,10 +49,12 @@ All mock functions have this special `.mock` property, which is where data about
 
 ```javascript
 const myMock = jest.fn();
+
 const a = new myMock();
 const b = {};
 const bound = myMock.bind(b);
 bound();
+
 console.log(myMock.mock.instances);
 // > [ <a>, <b> ]
 ```

From 2f7efaeaaa8454c95869b2ba3625ccc3ff294d89 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Mon, 19 Dec 2022 11:14:48 +0100
Subject: [PATCH 17/34] /docs adjustment

---
 docs/MockFunctions.md | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/docs/MockFunctions.md b/docs/MockFunctions.md
index 7bfbad107aee..5a04df3adac0 100644
--- a/docs/MockFunctions.md
+++ b/docs/MockFunctions.md
@@ -11,19 +11,18 @@ There are two ways to mock functions: Either by creating a mock function to use
 
 Let's imagine we're testing an implementation of a function `forEach`, which invokes a callback for each item in a supplied array.
 
-```javascript
-function forEach(items, callback) {
+```js title="forEach.js"
+export function forEach(items, callback) {
   for (let index = 0; index < items.length; index++) {
     callback(items[index]);
   }
 }
-module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```js title="foreach.test.js"
-const forEach = require('./foreach');
+```js title="forEach.test.js"
+const forEach = require('./foEach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
@@ -49,24 +48,22 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock1 = jest.fn();
-const a = new myMock1();
-console.log(myMock1.mock.instances);
-// > [ <a> ]
+const myMock = jest.fn();
 
-const myMock2 = jest.fn();
+const a = new myMock();
 const b = {};
-const bound = myMock2.bind(b);
+const bound = myMock.bind(b);
 bound();
-console.log(myMock2.mock.contexts);
-// > [ <b> ]
+
+console.log(myMock.mock.instances);
+// > [ <a>, <b> ]
 ```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
 
 ```javascript
 // The function was called exactly once
-expect(someMockFunction.mock.calls.length).toBe(1);
+expect(someMockFunction.mock.calls).toHaveLength(1);
 
 // The first arg of the first call to the function was 'first arg'
 expect(someMockFunction.mock.calls[0][0]).toBe('first arg');
@@ -119,8 +116,8 @@ const result = [11, 12].filter(num => filterTestFn(num));
 
 console.log(result);
 // > [11]
-console.log(filterTestFn.mock.calls[0][0]); // 11
-console.log(filterTestFn.mock.calls[1][0]); // 12
+console.log(filterTestFn.mock.calls);
+// > [ [11], [12] ]
 ```
 
 Most real-world examples actually involve getting ahold of a mock function on a 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.

From f467915b6b2367aea77feaee76e9a21fcf34541e Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Mon, 19 Dec 2022 11:19:10 +0100
Subject: [PATCH 18/34] V28 mockFunctions

---
 .../version-28.x/MockFunctions.md             | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/website/versioned_docs/version-28.x/MockFunctions.md b/website/versioned_docs/version-28.x/MockFunctions.md
index b225a0774986..bc3cc27763a9 100644
--- a/website/versioned_docs/version-28.x/MockFunctions.md
+++ b/website/versioned_docs/version-28.x/MockFunctions.md
@@ -11,19 +11,18 @@ There are two ways to mock functions: Either by creating a mock function to use
 
 Let's imagine we're testing an implementation of a function `forEach`, which invokes a callback for each item in a supplied array.
 
-```javascript
-function forEach(items, callback) {
+```js title="forEach.js"
+export function forEach(items, callback) {
   for (let index = 0; index < items.length; index++) {
     callback(items[index]);
   }
 }
-module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```js title="foreach.test.js"
-const forEach = require('./foreach');
+```js title="forEach.test.js"
+const forEach = require('./forEach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
@@ -49,17 +48,15 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock1 = jest.fn();
-const a = new myMock1();
-console.log(myMock1.mock.instances);
-// > [ <a> ]
+const myMock = jest.fn();
 
-const myMock2 = jest.fn();
+const a = new myMock();
 const b = {};
-const bound = myMock2.bind(b);
+const bound = myMock.bind(b);
 bound();
-console.log(myMock2.mock.contexts);
-// > [ <b> ]
+
+console.log(myMock.mock.instances);
+// > [ <a>, <b> ]
 ```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
@@ -116,8 +113,8 @@ const result = [11, 12].filter(num => filterTestFn(num));
 
 console.log(result);
 // > [11]
-console.log(filterTestFn.mock.calls[0][0]); // 11
-console.log(filterTestFn.mock.calls[1][0]); // 12
+console.log(filterTestFn.mock.calls);
+// > [ [11], [12] ]
 ```
 
 Most real-world examples actually involve getting ahold of a mock function on a 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.

From 9aaa5dd9e94676dfb95eb49f28e580729c9e1098 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Mon, 19 Dec 2022 11:20:53 +0100
Subject: [PATCH 19/34] mockfunction v26

---
 .../version-26.x/MockFunctions.md             | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/website/versioned_docs/version-26.x/MockFunctions.md b/website/versioned_docs/version-26.x/MockFunctions.md
index 484f80ad1800..1915b350fb92 100644
--- a/website/versioned_docs/version-26.x/MockFunctions.md
+++ b/website/versioned_docs/version-26.x/MockFunctions.md
@@ -11,19 +11,18 @@ There are two ways to mock functions: Either by creating a mock function to use
 
 Let's imagine we're testing an implementation of a function `forEach`, which invokes a callback for each item in a supplied array.
 
-```javascript
-function forEach(items, callback) {
+```js title="forEach.js"
+export function forEach(items, callback) {
   for (let index = 0; index < items.length; index++) {
     callback(items[index]);
   }
 }
-module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```js title="foreach.test.js"
-const forEach = require('./foreach');
+```js title="forEach.test.js"
+const forEach = require('./forEach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
@@ -49,17 +48,15 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock1 = jest.fn();
-const a = new myMock1();
-console.log(myMock1.mock.instances);
-// > [ <a> ]
+const myMock = jest.fn();
 
-const myMock2 = jest.fn();
+const a = new myMock();
 const b = {};
-const bound = myMock2.bind(b);
+const bound = myMock.bind(b);
 bound();
-console.log(myMock2.mock.contexts);
-// > [ <b> ]
+
+console.log(myMock.mock.instances);
+// > [ <a>, <b> ]
 ```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
@@ -113,8 +110,8 @@ const result = [11, 12].filter(num => filterTestFn(num));
 
 console.log(result);
 // > [11]
-console.log(filterTestFn.mock.calls[0][0]); // 11
-console.log(filterTestFn.mock.calls[1][0]); // 12
+console.log(filterTestFn.mock.calls);
+// > [ [11], [12] ]
 ```
 
 Most real-world examples actually involve getting ahold of a mock function on a 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.

From 6cf4e4af0bf479d60d8ad8d6e1dc86ddd9a8536d Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Mon, 19 Dec 2022 11:28:48 +0100
Subject: [PATCH 20/34] mockFunction v29

---
 docs/MockFunctions.md                         |  4 ++--
 .../version-27.x/MockFunctions.md             | 23 ++++++++-----------
 .../version-29.0/MockFunctions.md             | 23 ++++++++-----------
 3 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/docs/MockFunctions.md b/docs/MockFunctions.md
index 5a04df3adac0..64228ae63354 100644
--- a/docs/MockFunctions.md
+++ b/docs/MockFunctions.md
@@ -116,8 +116,8 @@ const result = [11, 12].filter(num => filterTestFn(num));
 
 console.log(result);
 // > [11]
-console.log(filterTestFn.mock.calls);
-// > [ [11], [12] ]
+console.log(filterTestFn.mock.calls[0][0]); // 11
+console.log(filterTestFn.mock.calls[1][0]); // 12
 ```
 
 Most real-world examples actually involve getting ahold of a mock function on a 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.
diff --git a/website/versioned_docs/version-27.x/MockFunctions.md b/website/versioned_docs/version-27.x/MockFunctions.md
index b225a0774986..7e9071fc5f1c 100644
--- a/website/versioned_docs/version-27.x/MockFunctions.md
+++ b/website/versioned_docs/version-27.x/MockFunctions.md
@@ -11,19 +11,18 @@ There are two ways to mock functions: Either by creating a mock function to use
 
 Let's imagine we're testing an implementation of a function `forEach`, which invokes a callback for each item in a supplied array.
 
-```javascript
-function forEach(items, callback) {
+```js title="forEach.js"
+export function forEach(items, callback) {
   for (let index = 0; index < items.length; index++) {
     callback(items[index]);
   }
 }
-module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```js title="foreach.test.js"
-const forEach = require('./foreach');
+```js title="forEach.test.js"
+const forEach = require('./forEach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
@@ -49,17 +48,15 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock1 = jest.fn();
-const a = new myMock1();
-console.log(myMock1.mock.instances);
-// > [ <a> ]
+const myMock = jest.fn();
 
-const myMock2 = jest.fn();
+const a = new myMock();
 const b = {};
-const bound = myMock2.bind(b);
+const bound = myMock.bind(b);
 bound();
-console.log(myMock2.mock.contexts);
-// > [ <b> ]
+
+console.log(myMock.mock.instances);
+// > [ <a>, <b> ]
 ```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
diff --git a/website/versioned_docs/version-29.0/MockFunctions.md b/website/versioned_docs/version-29.0/MockFunctions.md
index b225a0774986..7e9071fc5f1c 100644
--- a/website/versioned_docs/version-29.0/MockFunctions.md
+++ b/website/versioned_docs/version-29.0/MockFunctions.md
@@ -11,19 +11,18 @@ There are two ways to mock functions: Either by creating a mock function to use
 
 Let's imagine we're testing an implementation of a function `forEach`, which invokes a callback for each item in a supplied array.
 
-```javascript
-function forEach(items, callback) {
+```js title="forEach.js"
+export function forEach(items, callback) {
   for (let index = 0; index < items.length; index++) {
     callback(items[index]);
   }
 }
-module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```js title="foreach.test.js"
-const forEach = require('./foreach');
+```js title="forEach.test.js"
+const forEach = require('./forEach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
@@ -49,17 +48,15 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock1 = jest.fn();
-const a = new myMock1();
-console.log(myMock1.mock.instances);
-// > [ <a> ]
+const myMock = jest.fn();
 
-const myMock2 = jest.fn();
+const a = new myMock();
 const b = {};
-const bound = myMock2.bind(b);
+const bound = myMock.bind(b);
 bound();
-console.log(myMock2.mock.contexts);
-// > [ <b> ]
+
+console.log(myMock.mock.instances);
+// > [ <a>, <b> ]
 ```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:

From f1cae7798214169306bbdc112ea114ec9f339cda Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Mon, 19 Dec 2022 11:33:04 +0100
Subject: [PATCH 21/34] mockfunction v29.1

---
 .../version-29.1/MockFunctions.md             | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/website/versioned_docs/version-29.1/MockFunctions.md b/website/versioned_docs/version-29.1/MockFunctions.md
index b225a0774986..7e9071fc5f1c 100644
--- a/website/versioned_docs/version-29.1/MockFunctions.md
+++ b/website/versioned_docs/version-29.1/MockFunctions.md
@@ -11,19 +11,18 @@ There are two ways to mock functions: Either by creating a mock function to use
 
 Let's imagine we're testing an implementation of a function `forEach`, which invokes a callback for each item in a supplied array.
 
-```javascript
-function forEach(items, callback) {
+```js title="forEach.js"
+export function forEach(items, callback) {
   for (let index = 0; index < items.length; index++) {
     callback(items[index]);
   }
 }
-module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```js title="foreach.test.js"
-const forEach = require('./foreach');
+```js title="forEach.test.js"
+const forEach = require('./forEach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
@@ -49,17 +48,15 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock1 = jest.fn();
-const a = new myMock1();
-console.log(myMock1.mock.instances);
-// > [ <a> ]
+const myMock = jest.fn();
 
-const myMock2 = jest.fn();
+const a = new myMock();
 const b = {};
-const bound = myMock2.bind(b);
+const bound = myMock.bind(b);
 bound();
-console.log(myMock2.mock.contexts);
-// > [ <b> ]
+
+console.log(myMock.mock.instances);
+// > [ <a>, <b> ]
 ```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:

From b1eac2cbd7809f41be4c91cc9e63f9046d57b5a7 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Mon, 19 Dec 2022 11:35:11 +0100
Subject: [PATCH 22/34] mockFunctions 29.2

---
 .../version-29.2/MockFunctions.md             | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/website/versioned_docs/version-29.2/MockFunctions.md b/website/versioned_docs/version-29.2/MockFunctions.md
index b225a0774986..27da5598343c 100644
--- a/website/versioned_docs/version-29.2/MockFunctions.md
+++ b/website/versioned_docs/version-29.2/MockFunctions.md
@@ -11,19 +11,18 @@ There are two ways to mock functions: Either by creating a mock function to use
 
 Let's imagine we're testing an implementation of a function `forEach`, which invokes a callback for each item in a supplied array.
 
-```javascript
-function forEach(items, callback) {
+```js title="forEach.js"
+export function forEach(items, callback) {
   for (let index = 0; index < items.length; index++) {
     callback(items[index]);
   }
 }
-module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```js title="foreach.test.js"
-const forEach = require('./foreach');
+```js title="forEach.test.js"
+const forEach = require('./forEach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
@@ -49,17 +48,15 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock1 = jest.fn();
-const a = new myMock1();
-console.log(myMock1.mock.instances);
-// > [ <a> ]
+const myMock = jest.fn();
 
-const myMock2 = jest.fn();
+const a = new myMock();
 const b = {};
-const bound = myMock2.bind(b);
+const bound = myMock.bind(b);
 bound();
-console.log(myMock2.mock.contexts);
-// > [ <b> ]
+
+console.log(myMock.mock.instances);
+// > [ <a>, <b> ]
 ```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
@@ -77,6 +74,9 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
+// The function was called with a certain `this` context: the `element` object.
+expect(someMockFunction.mock.contexts[0]).toBe(element);
+
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 

From 817d3cdd9b747c9f2b750ccf6044dc415a0639c6 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Mon, 19 Dec 2022 11:36:28 +0100
Subject: [PATCH 23/34] mockFunctions v29.3

---
 .../version-29.3/MockFunctions.md             | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/website/versioned_docs/version-29.3/MockFunctions.md b/website/versioned_docs/version-29.3/MockFunctions.md
index b225a0774986..27da5598343c 100644
--- a/website/versioned_docs/version-29.3/MockFunctions.md
+++ b/website/versioned_docs/version-29.3/MockFunctions.md
@@ -11,19 +11,18 @@ There are two ways to mock functions: Either by creating a mock function to use
 
 Let's imagine we're testing an implementation of a function `forEach`, which invokes a callback for each item in a supplied array.
 
-```javascript
-function forEach(items, callback) {
+```js title="forEach.js"
+export function forEach(items, callback) {
   for (let index = 0; index < items.length; index++) {
     callback(items[index]);
   }
 }
-module.exports = forEach;
 ```
 
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
-```js title="foreach.test.js"
-const forEach = require('./foreach');
+```js title="forEach.test.js"
+const forEach = require('./forEach');
 
 const mockCallback = jest.fn(x => 42 + x);
 
@@ -49,17 +48,15 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock1 = jest.fn();
-const a = new myMock1();
-console.log(myMock1.mock.instances);
-// > [ <a> ]
+const myMock = jest.fn();
 
-const myMock2 = jest.fn();
+const a = new myMock();
 const b = {};
-const bound = myMock2.bind(b);
+const bound = myMock.bind(b);
 bound();
-console.log(myMock2.mock.contexts);
-// > [ <b> ]
+
+console.log(myMock.mock.instances);
+// > [ <a>, <b> ]
 ```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
@@ -77,6 +74,9 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
+// The function was called with a certain `this` context: the `element` object.
+expect(someMockFunction.mock.contexts[0]).toBe(element);
+
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 

From 11aed76ff0eca5217df822460896d6e808f29387 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Mon, 19 Dec 2022 11:36:39 +0100
Subject: [PATCH 24/34] docs type foEach

---
 docs/MockFunctions.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/MockFunctions.md b/docs/MockFunctions.md
index 64228ae63354..27da5598343c 100644
--- a/docs/MockFunctions.md
+++ b/docs/MockFunctions.md
@@ -22,7 +22,7 @@ export function forEach(items, callback) {
 To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
 
 ```js title="forEach.test.js"
-const forEach = require('./foEach');
+const forEach = require('./forEach');
 
 const mockCallback = jest.fn(x => 42 + x);
 

From 9b893b2c5fb4a270b4798753e7ac1adbef3f26c6 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Mon, 19 Dec 2022 11:39:03 +0100
Subject: [PATCH 25/34] context mock functions

---
 website/versioned_docs/version-28.x/MockFunctions.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/website/versioned_docs/version-28.x/MockFunctions.md b/website/versioned_docs/version-28.x/MockFunctions.md
index bc3cc27763a9..12803a6422b3 100644
--- a/website/versioned_docs/version-28.x/MockFunctions.md
+++ b/website/versioned_docs/version-28.x/MockFunctions.md
@@ -74,6 +74,9 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
+// The function was called with a certain `this` context: the `element` object.
+expect(someMockFunction.mock.contexts[0]).toBe(element);
+
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 

From 408dc625b1d2e8547808087a8dd3959f50a55095 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Mon, 19 Dec 2022 11:39:46 +0100
Subject: [PATCH 26/34] seperate line filter test

---
 website/versioned_docs/version-28.x/MockFunctions.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/versioned_docs/version-28.x/MockFunctions.md b/website/versioned_docs/version-28.x/MockFunctions.md
index 12803a6422b3..27da5598343c 100644
--- a/website/versioned_docs/version-28.x/MockFunctions.md
+++ b/website/versioned_docs/version-28.x/MockFunctions.md
@@ -116,8 +116,8 @@ const result = [11, 12].filter(num => filterTestFn(num));
 
 console.log(result);
 // > [11]
-console.log(filterTestFn.mock.calls);
-// > [ [11], [12] ]
+console.log(filterTestFn.mock.calls[0][0]); // 11
+console.log(filterTestFn.mock.calls[1][0]); // 12
 ```
 
 Most real-world examples actually involve getting ahold of a mock function on a 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.

From f75b8a4a4c1505409249821c12fb1cf2cd42dd12 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Mon, 19 Dec 2022 11:40:41 +0100
Subject: [PATCH 27/34] mockcontext 29.0

---
 website/versioned_docs/version-29.0/MockFunctions.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/website/versioned_docs/version-29.0/MockFunctions.md b/website/versioned_docs/version-29.0/MockFunctions.md
index 7e9071fc5f1c..27da5598343c 100644
--- a/website/versioned_docs/version-29.0/MockFunctions.md
+++ b/website/versioned_docs/version-29.0/MockFunctions.md
@@ -74,6 +74,9 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
+// The function was called with a certain `this` context: the `element` object.
+expect(someMockFunction.mock.contexts[0]).toBe(element);
+
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 

From e01bb925ccebaa08b225b8e77f94c6606408054a Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Mon, 19 Dec 2022 11:41:16 +0100
Subject: [PATCH 28/34] mockcontext v29.1

---
 website/versioned_docs/version-29.1/MockFunctions.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/website/versioned_docs/version-29.1/MockFunctions.md b/website/versioned_docs/version-29.1/MockFunctions.md
index 7e9071fc5f1c..27da5598343c 100644
--- a/website/versioned_docs/version-29.1/MockFunctions.md
+++ b/website/versioned_docs/version-29.1/MockFunctions.md
@@ -74,6 +74,9 @@ expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
 // The return value of the first call to the function was 'return value'
 expect(someMockFunction.mock.results[0].value).toBe('return value');
 
+// The function was called with a certain `this` context: the `element` object.
+expect(someMockFunction.mock.contexts[0]).toBe(element);
+
 // This function was instantiated exactly twice
 expect(someMockFunction.mock.instances.length).toBe(2);
 

From 25dbb6628097208e40d114047f8bd6a717c193ec Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Wed, 21 Dec 2022 15:03:30 +0100
Subject: [PATCH 29/34] mock.bind revert from v28 onwards

---
 docs/MockFunctions.md                         | 20 +++++++++----------
 .../version-28.x/MockFunctions.md             | 20 +++++++++----------
 .../version-29.0/MockFunctions.md             | 20 +++++++++----------
 .../version-29.1/MockFunctions.md             | 20 +++++++++----------
 .../version-29.2/MockFunctions.md             | 20 +++++++++----------
 .../version-29.3/MockFunctions.md             | 20 +++++++++----------
 6 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/docs/MockFunctions.md b/docs/MockFunctions.md
index 27da5598343c..078f62da676a 100644
--- a/docs/MockFunctions.md
+++ b/docs/MockFunctions.md
@@ -48,16 +48,16 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock = jest.fn();
-
-const a = new myMock();
-const b = {};
-const bound = myMock.bind(b);
-bound();
-
-console.log(myMock.mock.instances);
-// > [ <a>, <b> ]
-```
+ const myMock1 = jest.fn();
+ const a = new myMock1();
+ console.log(myMock1.mock.instances);
+ // > [ <a> ]
+ const myMock2 = jest.fn();
+ const b = {};
+ const bound = myMock2.bind(b);
+ bound();
+ console.log(myMock2.mock.contexts);
+ // > [ <b> ]
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
 
diff --git a/website/versioned_docs/version-28.x/MockFunctions.md b/website/versioned_docs/version-28.x/MockFunctions.md
index 27da5598343c..078f62da676a 100644
--- a/website/versioned_docs/version-28.x/MockFunctions.md
+++ b/website/versioned_docs/version-28.x/MockFunctions.md
@@ -48,16 +48,16 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock = jest.fn();
-
-const a = new myMock();
-const b = {};
-const bound = myMock.bind(b);
-bound();
-
-console.log(myMock.mock.instances);
-// > [ <a>, <b> ]
-```
+ const myMock1 = jest.fn();
+ const a = new myMock1();
+ console.log(myMock1.mock.instances);
+ // > [ <a> ]
+ const myMock2 = jest.fn();
+ const b = {};
+ const bound = myMock2.bind(b);
+ bound();
+ console.log(myMock2.mock.contexts);
+ // > [ <b> ]
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
 
diff --git a/website/versioned_docs/version-29.0/MockFunctions.md b/website/versioned_docs/version-29.0/MockFunctions.md
index 27da5598343c..078f62da676a 100644
--- a/website/versioned_docs/version-29.0/MockFunctions.md
+++ b/website/versioned_docs/version-29.0/MockFunctions.md
@@ -48,16 +48,16 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock = jest.fn();
-
-const a = new myMock();
-const b = {};
-const bound = myMock.bind(b);
-bound();
-
-console.log(myMock.mock.instances);
-// > [ <a>, <b> ]
-```
+ const myMock1 = jest.fn();
+ const a = new myMock1();
+ console.log(myMock1.mock.instances);
+ // > [ <a> ]
+ const myMock2 = jest.fn();
+ const b = {};
+ const bound = myMock2.bind(b);
+ bound();
+ console.log(myMock2.mock.contexts);
+ // > [ <b> ]
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
 
diff --git a/website/versioned_docs/version-29.1/MockFunctions.md b/website/versioned_docs/version-29.1/MockFunctions.md
index 27da5598343c..078f62da676a 100644
--- a/website/versioned_docs/version-29.1/MockFunctions.md
+++ b/website/versioned_docs/version-29.1/MockFunctions.md
@@ -48,16 +48,16 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock = jest.fn();
-
-const a = new myMock();
-const b = {};
-const bound = myMock.bind(b);
-bound();
-
-console.log(myMock.mock.instances);
-// > [ <a>, <b> ]
-```
+ const myMock1 = jest.fn();
+ const a = new myMock1();
+ console.log(myMock1.mock.instances);
+ // > [ <a> ]
+ const myMock2 = jest.fn();
+ const b = {};
+ const bound = myMock2.bind(b);
+ bound();
+ console.log(myMock2.mock.contexts);
+ // > [ <b> ]
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
 
diff --git a/website/versioned_docs/version-29.2/MockFunctions.md b/website/versioned_docs/version-29.2/MockFunctions.md
index 27da5598343c..078f62da676a 100644
--- a/website/versioned_docs/version-29.2/MockFunctions.md
+++ b/website/versioned_docs/version-29.2/MockFunctions.md
@@ -48,16 +48,16 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock = jest.fn();
-
-const a = new myMock();
-const b = {};
-const bound = myMock.bind(b);
-bound();
-
-console.log(myMock.mock.instances);
-// > [ <a>, <b> ]
-```
+ const myMock1 = jest.fn();
+ const a = new myMock1();
+ console.log(myMock1.mock.instances);
+ // > [ <a> ]
+ const myMock2 = jest.fn();
+ const b = {};
+ const bound = myMock2.bind(b);
+ bound();
+ console.log(myMock2.mock.contexts);
+ // > [ <b> ]
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
 
diff --git a/website/versioned_docs/version-29.3/MockFunctions.md b/website/versioned_docs/version-29.3/MockFunctions.md
index 27da5598343c..078f62da676a 100644
--- a/website/versioned_docs/version-29.3/MockFunctions.md
+++ b/website/versioned_docs/version-29.3/MockFunctions.md
@@ -48,16 +48,16 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
-const myMock = jest.fn();
-
-const a = new myMock();
-const b = {};
-const bound = myMock.bind(b);
-bound();
-
-console.log(myMock.mock.instances);
-// > [ <a>, <b> ]
-```
+ const myMock1 = jest.fn();
+ const a = new myMock1();
+ console.log(myMock1.mock.instances);
+ // > [ <a> ]
+ const myMock2 = jest.fn();
+ const b = {};
+ const bound = myMock2.bind(b);
+ bound();
+ console.log(myMock2.mock.contexts);
+ // > [ <b> ]
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
 

From 3658f8c617b66aff2434054f73fcc0148704985a Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Wed, 21 Dec 2022 15:06:14 +0100
Subject: [PATCH 30/34] .mock prop

---
 docs/MockFunctions.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/MockFunctions.md b/docs/MockFunctions.md
index 078f62da676a..786073f3d90a 100644
--- a/docs/MockFunctions.md
+++ b/docs/MockFunctions.md
@@ -52,12 +52,14 @@ All mock functions have this special `.mock` property, which is where data about
  const a = new myMock1();
  console.log(myMock1.mock.instances);
  // > [ <a> ]
+
  const myMock2 = jest.fn();
  const b = {};
  const bound = myMock2.bind(b);
  bound();
  console.log(myMock2.mock.contexts);
  // > [ <b> ]
+ ```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
 

From 77be83ace4ea133da28ee578feb7043a588f088d Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Wed, 21 Dec 2022 15:06:54 +0100
Subject: [PATCH 31/34] remove space

---
 docs/MockFunctions.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/MockFunctions.md b/docs/MockFunctions.md
index 786073f3d90a..79366ecafcdb 100644
--- a/docs/MockFunctions.md
+++ b/docs/MockFunctions.md
@@ -48,17 +48,17 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
- const myMock1 = jest.fn();
- const a = new myMock1();
- console.log(myMock1.mock.instances);
- // > [ <a> ]
-
- const myMock2 = jest.fn();
- const b = {};
- const bound = myMock2.bind(b);
- bound();
- console.log(myMock2.mock.contexts);
- // > [ <b> ]
+const myMock1 = jest.fn();
+const a = new myMock1();
+console.log(myMock1.mock.instances);
+// > [ <a> ]
+
+const myMock2 = jest.fn();
+const b = {};
+const bound = myMock2.bind(b);
+bound();
+console.log(myMock2.mock.contexts);
+// > [ <b> ]
  ```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:

From b0d31c126652f09203082496487335d80d039aeb Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Wed, 21 Dec 2022 15:08:57 +0100
Subject: [PATCH 32/34] enter and close function block

---
 docs/MockFunctions.md                         |  2 +-
 .../version-29.0/MockFunctions.md             | 22 ++++++++++---------
 .../version-29.1/MockFunctions.md             | 22 ++++++++++---------
 .../version-29.2/MockFunctions.md             | 22 ++++++++++---------
 .../version-29.3/MockFunctions.md             | 22 ++++++++++---------
 5 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/docs/MockFunctions.md b/docs/MockFunctions.md
index 79366ecafcdb..64382640bfda 100644
--- a/docs/MockFunctions.md
+++ b/docs/MockFunctions.md
@@ -59,7 +59,7 @@ const bound = myMock2.bind(b);
 bound();
 console.log(myMock2.mock.contexts);
 // > [ <b> ]
- ```
+```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
 
diff --git a/website/versioned_docs/version-29.0/MockFunctions.md b/website/versioned_docs/version-29.0/MockFunctions.md
index 078f62da676a..64382640bfda 100644
--- a/website/versioned_docs/version-29.0/MockFunctions.md
+++ b/website/versioned_docs/version-29.0/MockFunctions.md
@@ -48,16 +48,18 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
- const myMock1 = jest.fn();
- const a = new myMock1();
- console.log(myMock1.mock.instances);
- // > [ <a> ]
- const myMock2 = jest.fn();
- const b = {};
- const bound = myMock2.bind(b);
- bound();
- console.log(myMock2.mock.contexts);
- // > [ <b> ]
+const myMock1 = jest.fn();
+const a = new myMock1();
+console.log(myMock1.mock.instances);
+// > [ <a> ]
+
+const myMock2 = jest.fn();
+const b = {};
+const bound = myMock2.bind(b);
+bound();
+console.log(myMock2.mock.contexts);
+// > [ <b> ]
+```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
 
diff --git a/website/versioned_docs/version-29.1/MockFunctions.md b/website/versioned_docs/version-29.1/MockFunctions.md
index 078f62da676a..64382640bfda 100644
--- a/website/versioned_docs/version-29.1/MockFunctions.md
+++ b/website/versioned_docs/version-29.1/MockFunctions.md
@@ -48,16 +48,18 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
- const myMock1 = jest.fn();
- const a = new myMock1();
- console.log(myMock1.mock.instances);
- // > [ <a> ]
- const myMock2 = jest.fn();
- const b = {};
- const bound = myMock2.bind(b);
- bound();
- console.log(myMock2.mock.contexts);
- // > [ <b> ]
+const myMock1 = jest.fn();
+const a = new myMock1();
+console.log(myMock1.mock.instances);
+// > [ <a> ]
+
+const myMock2 = jest.fn();
+const b = {};
+const bound = myMock2.bind(b);
+bound();
+console.log(myMock2.mock.contexts);
+// > [ <b> ]
+```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
 
diff --git a/website/versioned_docs/version-29.2/MockFunctions.md b/website/versioned_docs/version-29.2/MockFunctions.md
index 078f62da676a..64382640bfda 100644
--- a/website/versioned_docs/version-29.2/MockFunctions.md
+++ b/website/versioned_docs/version-29.2/MockFunctions.md
@@ -48,16 +48,18 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
- const myMock1 = jest.fn();
- const a = new myMock1();
- console.log(myMock1.mock.instances);
- // > [ <a> ]
- const myMock2 = jest.fn();
- const b = {};
- const bound = myMock2.bind(b);
- bound();
- console.log(myMock2.mock.contexts);
- // > [ <b> ]
+const myMock1 = jest.fn();
+const a = new myMock1();
+console.log(myMock1.mock.instances);
+// > [ <a> ]
+
+const myMock2 = jest.fn();
+const b = {};
+const bound = myMock2.bind(b);
+bound();
+console.log(myMock2.mock.contexts);
+// > [ <b> ]
+```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
 
diff --git a/website/versioned_docs/version-29.3/MockFunctions.md b/website/versioned_docs/version-29.3/MockFunctions.md
index 078f62da676a..64382640bfda 100644
--- a/website/versioned_docs/version-29.3/MockFunctions.md
+++ b/website/versioned_docs/version-29.3/MockFunctions.md
@@ -48,16 +48,18 @@ test('forEach mock function', () => {
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
 ```javascript
- const myMock1 = jest.fn();
- const a = new myMock1();
- console.log(myMock1.mock.instances);
- // > [ <a> ]
- const myMock2 = jest.fn();
- const b = {};
- const bound = myMock2.bind(b);
- bound();
- console.log(myMock2.mock.contexts);
- // > [ <b> ]
+const myMock1 = jest.fn();
+const a = new myMock1();
+console.log(myMock1.mock.instances);
+// > [ <a> ]
+
+const myMock2 = jest.fn();
+const b = {};
+const bound = myMock2.bind(b);
+bound();
+console.log(myMock2.mock.contexts);
+// > [ <b> ]
+```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
 

From 737fb4dc984a66004e5aa81ef2a8a172f562360a Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Wed, 21 Dec 2022 15:11:04 +0100
Subject: [PATCH 33/34] close function block

---
 website/versioned_docs/version-28.x/MockFunctions.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/versioned_docs/version-28.x/MockFunctions.md b/website/versioned_docs/version-28.x/MockFunctions.md
index 078f62da676a..35dd79f80f50 100644
--- a/website/versioned_docs/version-28.x/MockFunctions.md
+++ b/website/versioned_docs/version-28.x/MockFunctions.md
@@ -47,7 +47,7 @@ test('forEach mock function', () => {
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
-```javascript
+````javascript
  const myMock1 = jest.fn();
  const a = new myMock1();
  console.log(myMock1.mock.instances);
@@ -86,7 +86,7 @@ expect(someMockFunction.mock.instances[0].name).toBe('test');
 
 // The first argument of the last call to the function was 'test'
 expect(someMockFunction.mock.lastCall[0]).toBe('test');
-```
+````
 
 ## Mock Return Values
 

From 0d91ee27c33e5bd1d05c5f784961d109e28e3a84 Mon Sep 17 00:00:00 2001
From: Jeroen de Vries <jeroendevriesrunbox.eu>
Date: Wed, 21 Dec 2022 15:13:19 +0100
Subject: [PATCH 34/34] v28 cloase block

---
 .../version-28.x/MockFunctions.md             | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/website/versioned_docs/version-28.x/MockFunctions.md b/website/versioned_docs/version-28.x/MockFunctions.md
index 35dd79f80f50..64382640bfda 100644
--- a/website/versioned_docs/version-28.x/MockFunctions.md
+++ b/website/versioned_docs/version-28.x/MockFunctions.md
@@ -47,17 +47,19 @@ test('forEach mock function', () => {
 
 All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
 
-````javascript
- const myMock1 = jest.fn();
- const a = new myMock1();
- console.log(myMock1.mock.instances);
- // > [ <a> ]
- const myMock2 = jest.fn();
- const b = {};
- const bound = myMock2.bind(b);
- bound();
- console.log(myMock2.mock.contexts);
- // > [ <b> ]
+```javascript
+const myMock1 = jest.fn();
+const a = new myMock1();
+console.log(myMock1.mock.instances);
+// > [ <a> ]
+
+const myMock2 = jest.fn();
+const b = {};
+const bound = myMock2.bind(b);
+bound();
+console.log(myMock2.mock.contexts);
+// > [ <b> ]
+```
 
 These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
 
@@ -86,7 +88,7 @@ expect(someMockFunction.mock.instances[0].name).toBe('test');
 
 // The first argument of the last call to the function was 'test'
 expect(someMockFunction.mock.lastCall[0]).toBe('test');
-````
+```
 
 ## Mock Return Values