diff --git a/examples/jest-vtu-example/.eslintignore b/examples/jest-vtu-example/.eslintignore new file mode 100644 index 0000000000..d6083f1e1a --- /dev/null +++ b/examples/jest-vtu-example/.eslintignore @@ -0,0 +1 @@ +*.spec.js.snap diff --git a/examples/jest-vtu-example/.gitignore b/examples/jest-vtu-example/.gitignore new file mode 100644 index 0000000000..4da44f57b7 --- /dev/null +++ b/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/ diff --git a/examples/jest-vtu-example/README.md b/examples/jest-vtu-example/README.md new file mode 100644 index 0000000000..03b5e9744e --- /dev/null +++ b/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 +``` diff --git a/examples/jest-vtu-example/babel.config.js b/examples/jest-vtu-example/babel.config.js new file mode 100644 index 0000000000..5b9bf010f8 --- /dev/null +++ b/examples/jest-vtu-example/babel.config.js @@ -0,0 +1,7 @@ +module.exports = { + env: { + test: { + presets: ['@babel/preset-env'] + } + } +} diff --git a/examples/jest-vtu-example/components/Btn/Btn.spec.js b/examples/jest-vtu-example/components/Btn/Btn.spec.js new file mode 100644 index 0000000000..5ead735618 --- /dev/null +++ b/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) + }) +}) diff --git a/examples/jest-vtu-example/components/Btn/Btn.vue b/examples/jest-vtu-example/components/Btn/Btn.vue new file mode 100644 index 0000000000..c6b2a7d38a --- /dev/null +++ b/examples/jest-vtu-example/components/Btn/Btn.vue @@ -0,0 +1,25 @@ + + + diff --git a/examples/jest-vtu-example/components/Btn/__snapshots__/Btn.spec.js.snap b/examples/jest-vtu-example/components/Btn/__snapshots__/Btn.spec.js.snap new file mode 100644 index 0000000000..93754d8280 --- /dev/null +++ b/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`] = ` + +`; diff --git a/examples/jest-vtu-example/layouts/default.vue b/examples/jest-vtu-example/layouts/default.vue new file mode 100644 index 0000000000..9842575287 --- /dev/null +++ b/examples/jest-vtu-example/layouts/default.vue @@ -0,0 +1,5 @@ + diff --git a/examples/jest-vtu-example/nuxt.config.js b/examples/jest-vtu-example/nuxt.config.js new file mode 100644 index 0000000000..f4e276c341 --- /dev/null +++ b/examples/jest-vtu-example/nuxt.config.js @@ -0,0 +1,3 @@ +export default { + mode: 'universal' +} diff --git a/examples/jest-vtu-example/package.json b/examples/jest-vtu-example/package.json new file mode 100644 index 0000000000..9cc395167a --- /dev/null +++ b/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": { + "^~/(.*)$": "/$1", + "^~~/(.*)$": "/$1" + }, + "transform": { + "^.+\\.js$": "/node_modules/babel-jest", + ".*\\.(vue)$": "/node_modules/vue-jest" + }, + "snapshotSerializers": [ + "/node_modules/jest-serializer-vue" + ], + "collectCoverage": true, + "collectCoverageFrom": [ + "/components/**/*.vue", + "/pages/*.vue" + ] + } +} diff --git a/examples/jest-vtu-example/pages/__snapshots__/index.spec.js.snap b/examples/jest-vtu-example/pages/__snapshots__/index.spec.js.snap new file mode 100644 index 0000000000..c4bca24d26 --- /dev/null +++ b/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`] = ` +
+
+

+ jest-vtu-example +

+ +
+
+`; diff --git a/examples/jest-vtu-example/pages/index.spec.js b/examples/jest-vtu-example/pages/index.spec.js new file mode 100644 index 0000000000..9b1209abd5 --- /dev/null +++ b/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() + }) +}) diff --git a/examples/jest-vtu-example/pages/index.vue b/examples/jest-vtu-example/pages/index.vue new file mode 100644 index 0000000000..5a30dbb685 --- /dev/null +++ b/examples/jest-vtu-example/pages/index.vue @@ -0,0 +1,20 @@ + + +