From 4af52e97a25ce96bb4d4d5c7e9108573d94f4866 Mon Sep 17 00:00:00 2001
From: Zhao Li <zhao.li@startingspark.com>
Date: Sun, 3 Apr 2022 19:48:51 -1000
Subject: [PATCH 1/2] docs(testing): remove example using mock with
 `inject-loader` because it no longer works and causes confusion for
 beginners. Use the existing spy implementation instead.

---
 docs/guide/testing.md | 63 ++-----------------------------------------
 1 file changed, 2 insertions(+), 61 deletions(-)

diff --git a/docs/guide/testing.md b/docs/guide/testing.md
index 460f1927d..258d976fb 100644
--- a/docs/guide/testing.md
+++ b/docs/guide/testing.md
@@ -51,9 +51,9 @@ describe('mutations', () => {
 
 ## Testing Actions
 
-Actions can be a bit more tricky because they may call out to external APIs. When testing actions, we usually need to do some level of mocking - for example, we can abstract the API calls into a service and mock that service inside our tests. In order to easily mock dependencies, we can use webpack and [inject-loader](https://github.com/plasticine/inject-loader) to bundle our test files.
+Actions can be a bit more tricky because they may call out to external APIs. When testing actions, we usually need to do some level of mocking and spying - for example, we can abstract the API calls into a service and mock that service inside our tests.
 
-Example testing an async action:
+The following code assumes your testing environment uses [Sinon.JS](http://sinonjs.org/):
 
 ```js
 // actions.js
@@ -70,67 +70,8 @@ export const getAllProducts = ({ commit }) => {
 ```js
 // actions.spec.js
 
-// use require syntax for inline loaders.
-// with inject-loader, this returns a module factory
-// that allows us to inject mocked dependencies.
 import { expect } from 'chai'
-const actionsInjector = require('inject-loader!./actions')
-
-// create the module with our mocks
-const actions = actionsInjector({
-  '../api/shop': {
-    getProducts (cb) {
-      setTimeout(() => {
-        cb([ /* mocked response */ ])
-      }, 100)
-    }
-  }
-})
-
-// helper for testing action with expected mutations
-const testAction = (action, payload, state, expectedMutations, done) => {
-  let count = 0
-
-  // mock commit
-  const commit = (type, payload) => {
-    const mutation = expectedMutations[count]
-
-    try {
-      expect(type).to.equal(mutation.type)
-      expect(payload).to.deep.equal(mutation.payload)
-    } catch (error) {
-      done(error)
-    }
-
-    count++
-    if (count >= expectedMutations.length) {
-      done()
-    }
-  }
-
-  // call the action with mocked store and arguments
-  action({ commit, state }, payload)
 
-  // check if no mutations should have been dispatched
-  if (expectedMutations.length === 0) {
-    expect(count).to.equal(0)
-    done()
-  }
-}
-
-describe('actions', () => {
-  it('getAllProducts', done => {
-    testAction(actions.getAllProducts, null, {}, [
-      { type: 'REQUEST_PRODUCTS' },
-      { type: 'RECEIVE_PRODUCTS', payload: { /* mocked response */ } }
-    ], done)
-  })
-})
-```
-
-If you have spies available in your testing environment (for example via [Sinon.JS](http://sinonjs.org/)), you can use them instead of the `testAction` helper:
-
-```js
 describe('actions', () => {
   it('getAllProducts', () => {
     const commit = sinon.spy()

From b9b860f80a6d674354ee86a50504a264eee54d95 Mon Sep 17 00:00:00 2001
From: Zhao Li <zhao.li@startingspark.com>
Date: Sun, 3 Apr 2022 19:49:40 -1000
Subject: [PATCH 2/2] docs(testing): add in simplistic Jest example in case it
 can be helpful

---
 docs/guide/testing.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/docs/guide/testing.md b/docs/guide/testing.md
index 258d976fb..f5782c6cc 100644
--- a/docs/guide/testing.md
+++ b/docs/guide/testing.md
@@ -87,6 +87,30 @@ describe('actions', () => {
 })
 ```
 
+If your environment uses [Jest](http://jestjs.io/):
+```js
+import shop from '../api/shop'
+
+describe('actions', () => {
+  it('getAllProducts', () => {
+    const commit = jest.fn()
+    const state = {}
+
+    let getProductsSpy = jest.spyOn(shop, 'getProducts')
+    getProductsSpy.mockImplementation(() => {
+      return [ /* mocked response */]
+    });
+
+    actions.getAllProducts({ commit, state })
+
+    expect(commit.args).to.deep.equal([
+      ['REQUEST_PRODUCTS'],
+      ['RECEIVE_PRODUCTS', { /* mocked response */ }]
+    ])
+  })
+})
+```
+
 ## Testing Getters
 
 If your getters have complicated computation, it is worth testing them. Getters are also very straightforward to test for the same reason as mutations.