finish mocking axios example (#361)

Author: bahmutov

.vscode/settings.json

@@ -1,5 +1,9 @@
 {
   "eslint.enable": false,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "json.format.enable": false
 }

README.md

@@ -598,7 +598,7 @@ Spec | Description
 --- | ---
 [access-component](cypress/component/advanced/access-component) | Access the mounted component directly from test
 [i18n](cypress/component/advanced/i18n) | Testing component that uses [Vue I18n](https://kazupon.github.io/vue-i18n/) plugin
-[mocking-axios](cypress/component/advanced/mocking-axios) | Mocking 3rd party module imports, like `axios` for fetching data using a wrapper module
+[mocking-axios](cypress/component/advanced/mocking-axios) | Mocking 3rd party CommonJS modules like `axios`
 [mocking-components](cypress/component/advanced/mocking-components) | Mocking locally registered child components during tests
 [mocking-imports](cypress/component/advanced/mocking-imports) | Stub ES6 imports from the tests
 [render-functions](cypress/component/advanced/render-functions) | Mounting components with a [render function](https://www.tutorialandexample.com/vue-js-render-functions/)

cypress/component/advanced/mocking-axios/mock-get-spec.js renamed to cypress/component/advanced/mocking-axios/1-Users.spec.js

@@ -1,14 +1,15 @@
 /// <reference types="cypress" />
 import { mount } from 'cypress-vue-unit-test'
-import AxiosGet from './AxiosGet.vue'
+import Users from './1-Users.vue'
+// we can load list of mock users straight from JSON file
+import mockUsers from './user.list.json'
 
 // import everything from "axios" module
 // so we can mock its methods from the test
-import * as Axios from 'axios'
+const Axios = require('axios')
 
 describe('Mocking get import from Axios', () => {
-  // https://github.com/bahmutov/cypress-vue-unit-test/issues/346
-  it.skip('renders mocked data', () => {
+  it('renders mocked data', () => {
     cy.stub(Axios, 'get')
       .resolves({
         data: [
@@ -20,12 +21,22 @@ describe('Mocking get import from Axios', () => {
       })
       .as('get')
 
-    console.log('Axios is', Axios)
-    console.log('window.AxiosLib is', window.AxiosLib)
-    console.log('window.AxiosLib === Axios?', window.AxiosLib === Axios)
-    mount(AxiosGet)
+    mount(Users)
     // mock response is used
     cy.get('li').should('have.length', 1)
     cy.get('@get').should('have.been.calledOnce')
   })
+
+  it('stubs with JSON loaded from fixture file', () => {
+    cy.stub(Axios, 'get')
+      .resolves({
+        data: mockUsers,
+      })
+      .as('get')
+
+    mount(Users)
+    // mock response is used
+    cy.get('li').should('have.length', 2)
+    cy.get('@get').should('have.been.calledOnce')
+  })
 })

cypress/component/advanced/mocking-axios/AxiosGet.vue renamed to cypress/component/advanced/mocking-axios/1-Users.vue

@@ -12,9 +12,6 @@
 <script>
 // import just the "get" from axios
 import {get} from 'axios';
-import * as Axios from 'axios';
-
-window.AxiosLib = Axios
 
 export default {
   data() {
@@ -25,10 +22,7 @@ export default {
 
   // Fetches posts when the component is created.
   created() {
-    console.log('get is', get)
-    console.log('Axios is', Axios)
-
-    Axios.get('https://jsonplaceholder.cypress.io/users?_limit=3')
+    get('https://jsonplaceholder.cypress.io/users?_limit=3')
     .then(response => {
       // JSON responses are automatically parsed.
       this.users = response.data

cypress/component/advanced/mocking-axios/2-Users.spec.js

@@ -0,0 +1,42 @@
+/// <reference types="cypress" />
+import { mount } from 'cypress-vue-unit-test'
+import Users from './2-Users.vue'
+// we can load list of mock users straight from JSON file
+import mockUsers from './user.list.json'
+
+// import everything from "axios" module
+// so we can mock its methods from the test
+const Axios = require('axios')
+
+describe('Mocking get import from Axios', () => {
+  it('renders mocked data', () => {
+    cy.stub(Axios, 'get')
+      .resolves({
+        data: [
+          {
+            id: 101,
+            name: 'Test User',
+          },
+        ],
+      })
+      .as('get')
+
+    mount(Users)
+    // mock response is used
+    cy.get('li').should('have.length', 1)
+    cy.get('@get').should('have.been.calledOnce')
+  })
+
+  it('stubs with JSON loaded from fixture file', () => {
+    cy.stub(Axios, 'get')
+      .resolves({
+        data: mockUsers,
+      })
+      .as('get')
+
+    mount(Users)
+    // mock response is used
+    cy.get('li').should('have.length', 2)
+    cy.get('@get').should('have.been.calledOnce')
+  })
+})

cypress/component/advanced/mocking-axios/AxiosGetRequire.vue renamed to cypress/component/advanced/mocking-axios/2-Users.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1>Axios Get</h1>
+    <h1>Axios</h1>
     <ul v-if="users && users.length">
       <li v-for="user of users" v-bind:key="user.id">
         <p><strong>{{user.id}}</strong> - {{user.name}}</p>
@@ -10,9 +10,8 @@
 </template>
 
 <script>
-const Axios = require('axios')
-
-window.AxiosLib = Axios
+// import the default axios
+import axios from 'axios';
 
 export default {
   data() {
@@ -23,10 +22,7 @@ export default {
 
   // Fetches posts when the component is created.
   created() {
-    console.log('get is', get)
-    console.log('Axios is', Axios)
-
-    Axios.get('https://jsonplaceholder.cypress.io/users?_limit=3')
+    axios.get('https://jsonplaceholder.cypress.io/users?_limit=3')
     .then(response => {
       // JSON responses are automatically parsed.
       this.users = response.data

cypress/component/advanced/mocking-axios/mock-axios-wrapper-spec.js renamed to cypress/component/advanced/mocking-axios/3-Users.spec.js

@@ -1,11 +1,12 @@
 /// <reference types="cypress" />
 import { mount } from 'cypress-vue-unit-test'
-import Users from './Users.vue'
+import Users from './3-Users.vue'
+// test file can import the entire AxiosApi module
 import * as AxiosApi from './AxiosApi'
 
 describe('Mocking imports from Axios Wrapper', () => {
   it('renders mocked data', () => {
-    // stub export "get" that Users.vue imports and uses
+    // stub export "get" that Users component imports and uses
     cy.stub(AxiosApi, 'get')
       .resolves({
         data: [

cypress/component/advanced/mocking-axios/Users.vue renamed to cypress/component/advanced/mocking-axios/3-Users.vue

@@ -1,27 +1,71 @@
-# mocking axios
+# Mocking axios
 
-**Help wanted [#346](https://github.com/bahmutov/cypress-vue-unit-test/issues/346)**
+Axios is a 3rd party CommonJS module installed in `node_modules` and used from Vue components. To mock such module you have 3 choices, depending on how it is used.
 
-How can `import ... from '...'` be mocked from Vue and from JS spec files if the import is from `node_modules`? In plain JS files we use '@babel/plugin-transform-modules-commonjs' plugin so that all imports from file X are the same object and the individual properties can be stubbed using `cy.stub(X, 'import name')`. But the `vue-loader` used to transpile Vue files seems to not allow additional Babel plugins?
+## Named import
 
-See [mock-get-spec.js](mock-get-spec.js) and [AxiosGet.vue](AxiosGet.vue) for an open problem.
+If the component imports a single named property from a CommonJS module, the spec file can require the entire module and stub a property using [cy.stub](https://on.cypress.io/stub) command.
 
-## Workaround
+```js
+// component code
+import { get } from 'axios'
+get('...').then(...)
+
+// spec file uses "require" to load the CommonJS module
+const Axios = require('axios')
+cy.stub(Axios, 'get').resolves({
+  data: [
+    {
+      id: 101,
+      name: 'Test User',
+    },
+  ],
+})
+```
+
+![Mocked get](./images/mock-get.png)
+
+See [1-Users.vue](1-Users.vue) and [1-Users.spec.js](1-Users.spec.js) files.
+
+## Method
+
+If the component imports the entire CommonJS module, then calls its method, you still require the same module from the spec file.
+
+```js
+// component code
+import axios from 'axios'
+axios.get('...').then(...)
+
+// spec file uses "require" to load the CommonJS module
+const Axios = require('axios')
+cy.stub(Axios, 'get').resolves({
+  data: [
+    {
+      id: 101,
+      name: 'Test User',
+    },
+  ],
+})
+```
+
+See [1-Users.vue](1-Users.vue) and [1-Users.spec.js](1-Users.spec.js) files.
+
+## Wrapped module
 
-As a good workaround in this case, you can use an intermediate CommonJS wrapper module, like [AxiosApi.js](AxiosApi.js) that re-experts the CommonJS module; you can then mock those exports.
+Sometimes the component code uses an intermediate ES6 wrapper module, like [AxiosApi.js](AxiosApi.js) that re-experts the CommonJS module; you can then mock those exports.
 
 ```js
 // AxiosApi.js
 export * from 'axios'
 ```
 
-[Users.vue](Users.vue) shows the component that imports from `AxiosApi.js`
+[3-Users.vue](3-Users.vue) shows the component that imports from `AxiosApi.js`
 
 ```js
 import { get } from './AxiosApi'
 ```
 
-The test [mock-axios-wrapper-spec.js](mock-axios-wrapper-spec.js) mocks the "get" import.
+The test [3-Users.spec.js](3-Users.spec.js) mocks the "get" import.
 
 ```js
 import Users from './Users.vue'