merged

Author: bahmutov

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, **help wanted [#346](https://github.com/bahmutov/cypress-vue-unit-test/issues/346)**
+[mocking-axios](cypress/component/advanced/mocking-axios) | Mocking 3rd party module imports, like `axios` for fetching data using a wrapper module
 [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/AxiosApi.js

@@ -0,0 +1,2 @@
+// an intermediate wrapper around "axios" CommonJS module
+export * from 'axios'

cypress/component/advanced/mocking-axios/README.md

@@ -1,7 +1,44 @@
 # mocking axios
 
-**Help wanted**
+**Help wanted [#346](https://github.com/bahmutov/cypress-vue-unit-test/issues/346)**
 
-How can `import ... from '...'` be mocked from Vue and from JS spec files? 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?
+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?
 
 See [mock-get-spec.js](mock-get-spec.js) and [AxiosGet.vue](AxiosGet.vue) for an open problem.
+
+## Workaround
+
+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.
+
+```js
+// AxiosApi.js
+export * from 'axios'
+```
+
+[Users.vue](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.
+
+```js
+import Users from './Users.vue'
+import * as AxiosApi from './AxiosApi'
+
+cy.stub(AxiosApi, 'get')
+  .resolves({
+    data: [
+      {
+        id: 101,
+        name: 'Test User',
+      },
+    ],
+  })
+  .as('get')
+
+mount(Users)
+```
+
+![Mocking axios wrapper exports](./images/wrapper.png)

cypress/component/advanced/mocking-axios/Users.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <h1>Using Axios Wrapper</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>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import {get} from './AxiosApi';
+
+export default {
+  data() {
+    return {
+      users: []
+    }
+  },
+
+  // Fetches posts when the component is created.
+  created() {
+    get('https://jsonplaceholder.cypress.io/users?_limit=3')
+    .then(response => {
+      // JSON responses are automatically parsed.
+      this.users = response.data
+    })
+  }
+}
+</script>

cypress/component/advanced/mocking-axios/images/wrapper.png

@@ -0,0 +1,25 @@
+/// <reference types="cypress" />
+import { mount } from 'cypress-vue-unit-test'
+import Users from './Users.vue'
+import * as AxiosApi from './AxiosApi'
+
+describe('Mocking imports from Axios Wrapper', () => {
+  it('renders mocked data', () => {
+    // stub export "get" that Users.vue imports and uses
+    cy.stub(AxiosApi, 'get')
+      .resolves({
+        data: [
+          {
+            id: 101,
+            name: 'Test User',
+          },
+        ],
+      })
+      .as('get')
+
+    mount(Users)
+    // the mock response is used 😀
+    cy.get('li').should('have.length', 1)
+    cy.get('@get').should('have.been.calledOnce')
+  })
+})