docs: runnable example of the for Each test

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).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:
 
 ```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.

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).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:
 
 ```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.

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).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:
 
 ```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);
 

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).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:

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: