chore(examples): Add Jest + Vue Test Utils example (#4116)

* chore(examples): Add Jest + Vue Test Utils example

* style: Lint

* refactor: Rename button component & fix lint errors

* refactor: Use export default

* refactor: Babel 7 setup

examples/jest-vtu-example/.eslintignore

@@ -0,0 +1 @@
+*.spec.js.snap

examples/jest-vtu-example/.gitignore

@@ -0,0 +1,14 @@
+# dependencies
+node_modules
+
+# logs
+npm-debug.log
+
+# Nuxt build
+.nuxt
+
+# Nuxt generate
+dist
+
+# coverage report
+coverage/

examples/jest-vtu-example/README.md

@@ -0,0 +1,9 @@
+# Jest + Vue Test Utils example
+
+```sh
+# Install dependencies
+npm i # or yarn
+
+# Run tests
+npm test
+```

examples/jest-vtu-example/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  env: {
+    test: {
+      presets: ['@babel/preset-env']
+    }
+  }
+}

examples/jest-vtu-example/components/Btn/Btn.spec.js

@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils'
+import Btn from './Btn'
+
+const factory = () => shallowMount(Btn, {
+  propsData: {
+    label: 'click me!'
+  }
+})
+
+describe('Btn', () => {
+  test('mounts properly', () => {
+    const wrapper = factory()
+    expect(wrapper.isVueInstance()).toBeTruthy()
+  })
+
+  test('renders properly', () => {
+    const wrapper = factory()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('calls handleClick on click', () => {
+    const wrapper = factory()
+    const handleClickMock = jest.fn()
+    wrapper.setMethods({
+      handleClick: handleClickMock
+    })
+    wrapper.find('button').trigger('click')
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  test('clicked is true after click', () => {
+    const wrapper = factory()
+    wrapper.find('button').trigger('click')
+    expect(wrapper.vm.clicked).toBe(true)
+  })
+})

examples/jest-vtu-example/components/Btn/Btn.vue

@@ -0,0 +1,25 @@
+<template>
+  <button @click="handleClick">
+    {{ label }}
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'Button',
+  props: {
+    label: {
+      type: String,
+      required: true
+    }
+  },
+  data: () => ({
+    clicked: false
+  }),
+  methods: {
+    handleClick() {
+      this.clicked = true
+    }
+  }
+}
+</script>

examples/jest-vtu-example/components/Btn/__snapshots__/Btn.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Btn renders properly 1`] = `
+<button>
+  click me!
+</button>
+`;

examples/jest-vtu-example/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <nuxt />
+  </div>
+</template>

examples/jest-vtu-example/nuxt.config.js

@@ -0,0 +1,3 @@
+export default {
+  mode: 'universal'
+}

examples/jest-vtu-example/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "example-jest-vtu",
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate",
+    "test": "jest ."
+  },
+  "dependencies": {
+    "nuxt-edge": "latest"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@vue/test-utils": "^1.0.0-beta.25",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^23.6.0",
+    "jest": "^23.6.0",
+    "jest-serializer-vue": "^2.0.2",
+    "vue-jest": "^2.6.0"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue"
+    ],
+    "watchman": false,
+    "moduleNameMapper": {
+      "^~/(.*)$": "<rootDir>/$1",
+      "^~~/(.*)$": "<rootDir>/$1"
+    },
+    "transform": {
+      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+    },
+    "snapshotSerializers": [
+      "<rootDir>/node_modules/jest-serializer-vue"
+    ],
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+      "<rootDir>/components/**/*.vue",
+      "<rootDir>/pages/*.vue"
+    ]
+  }
+}

examples/jest-vtu-example/pages/__snapshots__/index.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index renders properly 1`] = `
+<section class="container">
+  <div>
+    <h1 class="title">
+      jest-vtu-example
+    </h1>
+    <btn-stub label="click me!"></btn-stub>
+  </div>
+</section>
+`;

examples/jest-vtu-example/pages/index.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils'
+import index from './index'
+
+describe('index', () => {
+  test('mounts properly', () => {
+    const wrapper = shallowMount(index)
+    expect(wrapper.isVueInstance()).toBeTruthy()
+  })
+
+  test('renders properly', () => {
+    const wrapper = shallowMount(index)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

examples/jest-vtu-example/pages/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <section class="container">
+    <div>
+      <h1 class="title">
+        jest-vtu-example
+      </h1>
+      <Btn label="click me!" />
+    </div>
+  </section>
+</template>
+
+<script>
+import Btn from '~/components/Btn/Btn.vue'
+
+export default {
+  components: {
+    Btn
+  }
+}
+</script>