test: update to support new @vue/test-utils (vuejs#108)

justinhelmer · eddyerburgh · commit d5ba225d9de4 · 2018-10-03T18:41:15.000+01:00
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
   "author": "Edd Yerburgh",
   "license": "MIT",
   "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.25",
     "babel-core": "^6.25.0",
     "babel-jest": "^20.0.3",
     "babel-plugin-istanbul": "^4.1.4",
@@ -49,8 +50,7 @@
     "stylus": "^0.54.5",
     "typescript": "^2.5.2",
     "vue": "^2.4.2",
-    "vue-template-compiler": "^2.4.2",
-    "vue-test-utils": "git+https://github.com/vuejs/vue-test-utils.git"
+    "vue-template-compiler": "^2.4.2"
   },
   "peerDependencies": {
     "babel-core": "^6.25.0 || ^7.0.0-0",
diff --git a/test/FunctionalSFC.spec.js b/test/FunctionalSFC.spec.js
@@ -1,10 +1,10 @@
-import { shallow } from 'vue-test-utils'
+import { shallowMount } from '@vue/test-utils'
 import FunctionalSFC from './resources/FunctionalSFC.vue'
 
 let wrapper
 const clickSpy = jest.fn()
 beforeEach(() => {
-  wrapper = shallow(FunctionalSFC, {
+  wrapper = shallowMount(FunctionalSFC, {
     context: {
       props: { msg: { id: 1, title: 'foo' }, onClick: clickSpy }
     }
@@ -22,12 +22,11 @@ describe('Processes .vue file with functional template', () => {
   })
 
   it('is functional', () => {
-    // note: for new version of @vue/vue-utils we can use wrapper.isFunctionalComponent for this
-    expect(wrapper.vm._vnode.fnOptions.functional).toBe(true)
+    expect(wrapper.isFunctionalComponent).toBe(true)
   })
 
   it('handles slot', () => {
-    wrapper = shallow(FunctionalSFC, {
+    wrapper = shallowMount(FunctionalSFC, {
       context: {
         props: { msg: { id: 1, title: '' }},
         children: ['this is a slot']
diff --git a/test/FunctionalSFCParent.spec.js b/test/FunctionalSFCParent.spec.js
@@ -1,4 +1,4 @@
-import { mount } from 'vue-test-utils'
+import { mount } from '@vue/test-utils'
 import FunctionalSFCParent from './resources/FunctionalSFCParent.vue'
 
 test('processes .vue file with functional template from parent', () => {
diff --git a/test/NoScript.spec.js b/test/NoScript.spec.js
@@ -1,4 +1,4 @@
-import { mount } from 'vue-test-utils'
+import { mount } from '@vue/test-utils'
 import NoScript from './resources/NoScript.vue'
 
 describe('NoScript', () => {
diff --git a/test/RenderFunction.spec.js b/test/RenderFunction.spec.js
@@ -1,8 +1,8 @@
-import { shallow } from 'vue-test-utils'
+import { shallowMount } from '@vue/test-utils'
 import RenderFunction from './resources/RenderFunction.vue'
 
 test('processes .vue file with no template', () => {
-  const wrapper = shallow(RenderFunction)
+  const wrapper = shallowMount(RenderFunction)
 
   expect(wrapper.is('section')).toBe(true)
 })
diff --git a/test/TypeScript.spec.js b/test/TypeScript.spec.js
@@ -1,4 +1,4 @@
-import { shallow } from 'vue-test-utils'
+import { shallowMount } from '@vue/test-utils'
 import { resolve } from 'path'
 import TypeScript from './resources/TypeScript.vue'
 import jestVue from '../vue-jest'
@@ -10,14 +10,14 @@ beforeEach(() => {
 })
 
 test('processes .vue files', () => {
-  shallow(TypeScript)
+  shallowMount(TypeScript)
 })
 
 test('processes .vue files without .babelrc', () => {
   const babelRcPath = resolve(__dirname, '../.babelrc')
   const tempPath = resolve(__dirname, '../.renamed')
   renameSync(babelRcPath, tempPath)
-  shallow(TypeScript)
+  shallowMount(TypeScript)
   renameSync(tempPath, babelRcPath)
 })
 
diff --git a/test/coffee.spec.js b/test/coffee.spec.js
@@ -1,4 +1,4 @@
-import { shallow, mount } from 'vue-test-utils'
+import { shallowMount, mount } from '@vue/test-utils'
 import Coffee from './resources/Coffee.vue'
 import CoffeeScript from './resources/CoffeeScript.vue'
 import CoffeeES6 from './resources/CoffeeES6.vue'
@@ -20,19 +20,19 @@ describe('Test CoffeeScript - coffee.spec.js', () => {
   })
 
   test('processes .vue file with lang set to coffee', () => {
-    shallow(Coffee)
+    shallowMount(Coffee)
   })
 
   test('processes .vue file with lang set to coffeescript', () => {
-    shallow(CoffeeScript)
+    shallowMount(CoffeeScript)
   })
 
   test('processes .vue file with lang set to coffee (ES6)', () => {
-    shallow(CoffeeES6)
+    shallowMount(CoffeeES6)
   })
 
   test('processes .vue file with lang set to coffeescript (ES6)', () => {
-    shallow(CoffeeScriptES6)
+    shallowMount(CoffeeScriptES6)
   })
 
   test('processes .vue file with lang set to coffeescript (ES6)', () => {
diff --git a/test/css.spec.js b/test/css.spec.js
@@ -1,10 +1,10 @@
-import { shallow } from 'vue-test-utils'
+import { shallowMount } from '@vue/test-utils'
 import Css from './resources/Css.vue'
 
 describe('processes .vue file with Css style', () => {
   let wrapper
   beforeAll(() => {
-    wrapper = shallow(Css)
+    wrapper = shallowMount(Css)
   })
 
   it('should bind from style tags with named module', () => {
diff --git a/test/jade.spec.js b/test/jade.spec.js
@@ -1,8 +1,8 @@
-import { shallow } from 'vue-test-utils'
+import { shallowMount } from '@vue/test-utils'
 import Jade from './resources/Jade.vue'
 
 test('processes .vue file with jade template', () => {
-  const wrapper = shallow(Jade)
+  const wrapper = shallowMount(Jade)
   expect(wrapper.is('div')).toBe(true)
   expect(wrapper.classes()).toContain('jade')
 })
diff --git a/test/less.spec.js b/test/less.spec.js
@@ -1,14 +1,14 @@
-import { shallow } from 'vue-test-utils'
+import { shallowMount } from '@vue/test-utils'
 import Less from './resources/Less.vue'
 import LessModule from './resources/LessModule.vue'
 
 describe('processes .vue file with Less style', () => {
   it('does not error on less', () => {
-    const wrapper = shallow(Less)
+    const wrapper = shallowMount(Less)
     expect(wrapper.classes()).toContain('testLess')
   })
 
   it('does not error on less module', () => {
-    expect(() => shallow(LessModule)).not.toThrow()
+    expect(() => shallowMount(LessModule)).not.toThrow()
   })
 })
diff --git a/test/postcss.spec.js b/test/postcss.spec.js
@@ -1,14 +1,14 @@
-import { shallow } from 'vue-test-utils'
+import { shallowMount } from '@vue/test-utils'
 import PostCss from './resources/PostCss.vue'
 import PostCssModule from './resources/PostCssModule.vue'
 
 describe('processes .vue file with PostCSS style', () => {
   it('does not error on pcss/postcss', () => {
-    const wrapper = shallow(PostCss)
+    const wrapper = shallowMount(PostCss)
     expect(wrapper.classes()).toContain('testPcss')
   })
 
   it('does not error on pcss/postcss module', () => {
-    expect(() => shallow(PostCssModule)).not.toThrow()
+    expect(() => shallowMount(PostCssModule)).not.toThrow()
   })
 })
diff --git a/test/pug.spec.js b/test/pug.spec.js
@@ -1,11 +1,11 @@
-import { shallow } from 'vue-test-utils'
+import { shallowMount } from '@vue/test-utils'
 import { resolve } from 'path'
 import Pug from './resources/Pug.vue'
 import jestVue from '../vue-jest'
 import { readFileSync } from 'fs'
 
 test('processes .vue file with pug template', () => {
-  const wrapper = shallow(Pug)
+  const wrapper = shallowMount(Pug)
   expect(wrapper.is('div')).toBe(true)
   expect(wrapper.classes()).toContain('pug')
 })
diff --git a/test/sass.spec.js b/test/sass.spec.js
@@ -1,14 +1,14 @@
-import { shallow, mount } from 'vue-test-utils'
+import { shallowMount, mount } from '@vue/test-utils'
 import Sass from './resources/Sass.vue'
 import SassModule from './resources/SassModule.vue'
 import SassModuleFunctional from './resources/SassModuleFunctional.vue'
 
 describe('processes .vue file with sass style', () => {
   it('does not error on sass', () => {
-    expect(() => shallow(Sass)).not.toThrow()
+    expect(() => shallowMount(Sass)).not.toThrow()
   })
   it('does not error on sass module', () => {
-    expect(() => shallow(SassModule)).not.toThrow()
+    expect(() => shallowMount(SassModule)).not.toThrow()
   })
   it('does not error on sass module when functional', () => {
     expect(() => mount(SassModuleFunctional)).not.toThrow()
@@ -20,7 +20,7 @@ describe('processes .vue files which combine sass and modules', () => {
   let functionalWrapper
 
   beforeEach(() => {
-    wrapper = shallow(SassModule)
+    wrapper = shallowMount(SassModule)
     functionalWrapper = mount(SassModuleFunctional)
   })
 
@@ -42,7 +42,7 @@ describe('processes .vue files which combine sass and modules', () => {
   describe('entrypoint: direct import in SFC', () => {
     let wrapper
     beforeEach(() => {
-      wrapper = shallow(SassModule)
+      wrapper = shallowMount(SassModule)
     })
     it('does inject classes from directly imported files by relative path', () => {
       expect(wrapper.vm.$style.directImportClass).toBeDefined()
@@ -69,7 +69,7 @@ describe('processes .vue files which combine sass and modules', () => {
   describe('entrypoint: import inside previously imported stylesheet', () => {
     let wrapper
     beforeEach(() => {
-      wrapper = shallow(SassModule)
+      wrapper = shallowMount(SassModule)
     })
     it('does inject classes from imports within sass files by relative path', () => {
       expect(wrapper.vm.$style.sassImportClass).toBeDefined()
@@ -96,7 +96,7 @@ describe('processes .vue files which combine sass and modules', () => {
   describe('multiple modules', () => {
     let wrapper
     beforeEach(() => {
-      wrapper = shallow(SassModule)
+      wrapper = shallowMount(SassModule)
     })
     it('does inject classes from sass if multiple modules are present', () => {
       expect(wrapper.vm.$style.directImportSecondClass).toBeDefined()
diff --git a/test/scss.spec.js b/test/scss.spec.js
@@ -1,14 +1,14 @@
-import { shallow, mount } from 'vue-test-utils'
+import { shallowMount, mount } from '@vue/test-utils'
 import Scss from './resources/Scss.vue'
 import ScssModule from './resources/ScssModule.vue'
 import ScssModuleFunctional from './resources/ScssModuleFunctional.vue'
 
 describe('processes .vue file with scss style', () => {
   it('does not error on scss', () => {
-    expect(() => shallow(Scss)).not.toThrow()
+    expect(() => shallowMount(Scss)).not.toThrow()
   })
   it('does not error on scss module', () => {
-    expect(() => shallow(ScssModule)).not.toThrow()
+    expect(() => shallowMount(ScssModule)).not.toThrow()
   })
   it('does not error on scss module when functional', () => {
     expect(() => mount(ScssModuleFunctional)).not.toThrow()
@@ -20,7 +20,7 @@ describe('processes .vue files which combine scss and modules', () => {
   let functionalWrapper
 
   beforeEach(() => {
-    wrapper = shallow(ScssModule)
+    wrapper = shallowMount(ScssModule)
     functionalWrapper = mount(ScssModuleFunctional)
   })
 
@@ -42,7 +42,7 @@ describe('processes .vue files which combine scss and modules', () => {
   describe('entrypoint: direct import in SFC', () => {
     let wrapper
     beforeEach(() => {
-      wrapper = shallow(ScssModule)
+      wrapper = shallowMount(ScssModule)
     })
     it('does inject classes from directly imported files by relative path', () => {
       expect(wrapper.vm.$style.directImportClass).toBeDefined()
@@ -69,7 +69,7 @@ describe('processes .vue files which combine scss and modules', () => {
   describe('entrypoint: import inside previously imported stylesheet', () => {
     let wrapper
     beforeEach(() => {
-      wrapper = shallow(ScssModule)
+      wrapper = shallowMount(ScssModule)
     })
     it('does inject classes from imports within scss files by relative path', () => {
       expect(wrapper.vm.$style.scssImportClass).toBeDefined()
@@ -96,7 +96,7 @@ describe('processes .vue files which combine scss and modules', () => {
   describe('multiple modules', () => {
     let wrapper
     beforeEach(() => {
-      wrapper = shallow(ScssModule)
+      wrapper = shallowMount(ScssModule)
     })
     it('does inject classes from scss if multiple modules are present', () => {
       expect(wrapper.vm.$style.directImportSecondClass).toBeDefined()
diff --git a/test/stylus.spec.js b/test/stylus.spec.js
@@ -1,4 +1,4 @@
-import { shallow } from 'vue-test-utils'
+import { shallowMount } from '@vue/test-utils'
 import Stylus from './resources/Stylus.vue'
 import StylusRelative from './resources/StylusRelative.vue'
 import { resolve } from 'path'
@@ -8,7 +8,7 @@ import jestVue from '../vue-jest'
 describe('processes .vue file with Stylus style', () => {
   let wrapper
   beforeAll(() => {
-    wrapper = shallow(Stylus)
+    wrapper = shallowMount(Stylus)
   })
 
   it('should bind from style tags with named module', () => {
@@ -24,7 +24,7 @@ describe('processes .vue file with Stylus style', () => {
   })
 
   it('should handle relative imports', () => {
-    expect(() => shallow(StylusRelative)).not.toThrow()
+    expect(() => shallowMount(StylusRelative)).not.toThrow()
   })
 
   it('does not attempty to compile if experimentalStyles flag is passed', () => {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { mount } from 'vue-test-utils'`
	`1`	`+import { mount } from '@vue/test-utils'`
`2`	`2`	`import FunctionalSFCParent from './resources/FunctionalSFCParent.vue'`
`3`	`3`
`4`	`4`	`test('processes .vue file with functional template from parent', () => {`