linking to root readme

Author: bahmutov

README.md

@@ -10,7 +10,7 @@
 
 > A little helper to unit test Vue components in the open source [Cypress.io](https://www.cypress.io/) E2E test runner **v4.5.0+**
 
-**Jump to:** [Comparison](#comparison), Examples: [basic](#basic-examples)
+**Jump to:** [Comparison](#comparison), Examples: [basic](#basic-examples), [advanced](#advanced-examples)
 
 ## TLDR
 
@@ -614,6 +614,12 @@ Spec | Description
 --- | ---
 [Hello](cypress/component/basic/hello) | Testing examples from Vue2 cookbook
 
+### Advanced examples
+
+Spec | Description
+--- | ---
+[mocking-imports](cypress/component/advanced/mocking-imports) | Stub ES6 imports from the tests
+
 ## Known problems
 
 See issues labeled [v2](https://github.com/bahmutov/cypress-vue-unit-test/labels/v2)

cypress/component/advanced/mocking-imports/Hello.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>Hello, {{ greeting }}!</div>
+</template>
+
+<script>
+import { greeting } from "./greeting";
+
+export default {
+  name: "Hello",
+  data() {
+    return {
+      greeting
+    };
+  }
+};
+</script>

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

@@ -0,0 +1,7 @@
+# Mocking ES6 imports
+
+Vue component in [Hello.vue](Hello.vue) imports a named ES6 import from [greeting.js](greeting.js). From the test [spec.js](spec.js) we can mock that import to make testing simpler.
+
+Compare no mocking
+
+![Test without mocking](images/no-mocking.png)

cypress/component/advanced/mocking-imports/greeting.js

@@ -0,0 +1 @@
+export const greeting = 'world'

cypress/component/advanced/mocking-imports/images/no-mocking.png

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+import Hello from './Hello.vue'
+import { mount } from 'cypress-vue-unit-test'
+import * as GreetingModule from './greeting'
+
+describe('Mocking ES6 imports', () => {
+  beforeEach(() => {
+    cy.viewport(300, 200)
+  })
+
+  it('shows real greeting without mocking', () => {
+    mount(Hello)
+    cy.contains('Hello, world!')
+  })
+
+  // https://github.com/bahmutov/cypress-vue-unit-test/issues/328
+  it.skip('shows mocked greeting', () => {
+    cy.stub(GreetingModule, 'greeting').returns('Cypress')
+    mount(Hello)
+    cy.contains('Hello, Cypress!')
+  })
+})