fix(unit-jest, unit-mocha): generate passing tests when bare option is used with router enabled (#5591)

Fixes #3544

Author: IwalkAlone

Diff for: packages/@vue/cli-plugin-unit-jest/__tests__/jestGenerator.spec.js

@@ -88,3 +88,56 @@ test('TS + bare', async () => {
   expect(spec).toMatch(`const wrapper = shallowMount(App)`)
   expect(spec).toMatch(`expect(wrapper.text()).toMatch(\`Welcome to Your Vue.js + TypeScript App\`)`)
 })
+
+test('bare + router', async () => {
+  const { files } = await generateWithPlugin([
+    {
+      id: 'unit-jest',
+      apply: require('../generator'),
+      options: {}
+    },
+    {
+      id: '@vue/cli-service',
+      apply: () => {},
+      options: { bare: true }
+    },
+    {
+      id: 'router',
+      apply: () => {},
+      options: {}
+    }
+  ])
+
+  const spec = files['tests/unit/example.spec.js']
+  expect(spec).toMatch(`const wrapper = mount(App,`)
+  expect(spec).toMatch(`expect(wrapper.text()).toMatch(\`Welcome to Your Vue.js App\`)`)
+})
+
+test('TS + bare + router', async () => {
+  const { files } = await generateWithPlugin([
+    {
+      id: 'unit-jest',
+      apply: require('../generator'),
+      options: {}
+    },
+    {
+      id: 'typescript',
+      apply: () => {},
+      options: {}
+    },
+    {
+      id: '@vue/cli-service',
+      apply: () => {},
+      options: { bare: true }
+    },
+    {
+      id: 'router',
+      apply: () => {},
+      options: {}
+    }
+  ])
+
+  const spec = files['tests/unit/example.spec.ts']
+  expect(spec).toMatch(`const wrapper = mount(App,`)
+  expect(spec).toMatch(`expect(wrapper.text()).toMatch(\`Welcome to Your Vue.js App\`)`)
+})

Diff for: packages/@vue/cli-plugin-unit-jest/generator/index.js

@@ -3,7 +3,8 @@ module.exports = (api, options, rootOptions, invoking) => {
 
   api.render('./template', {
     isVue3,
-    hasTS: api.hasPlugin('typescript')
+    hasTS: api.hasPlugin('typescript'),
+    hasRouter: api.hasPlugin('router')
   })
 
   api.extendPackage({

Diff for: packages/@vue/cli-plugin-unit-jest/generator/template/tests/unit/example.spec.js

@@ -1,5 +1,9 @@
 <%_ if (!hasTS) { _%>
+<%_ if (!rootOptions.bare || !hasRouter) { _%>
 import { shallowMount } from '@vue/test-utils'
+<%_ } else { _%>
+import { mount, createLocalVue } from '@vue/test-utils'
+<%_ } _%>
 <%_ if (!rootOptions.bare) { _%>
 import HelloWorld from '@/components/HelloWorld.vue'
 
@@ -18,10 +22,28 @@ describe('HelloWorld.vue', () => {
 })
 <%_ } else { _%>
 import App from '@/App.vue'
+<%_ if (!hasRouter) { _%>
 
 test('App should work', () => {
   const wrapper = shallowMount(App)
   expect(wrapper.text()).toMatch(`Welcome to Your Vue.js App`)
 })
+
+<%_ } else {_%>
+import VueRouter from 'vue-router'
+import router from '@/router'
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+
+test('App should render default route', () => {
+  const wrapper = mount(App, {
+    localVue,
+    router
+  })
+  expect(wrapper.text()).toMatch(`Welcome to Your Vue.js App`)
+})
+
+<%_ } _%>
 <%_ } _%>
 <%_ } _%>

Diff for: packages/@vue/cli-plugin-unit-jest/generator/template/tests/unit/example.spec.ts

@@ -1,5 +1,9 @@
 <%_ if (hasTS) { _%>
+<%_ if (!rootOptions.bare || !hasRouter) { _%>
 import { shallowMount } from '@vue/test-utils'
+<%_ } else { _%>
+import { mount, createLocalVue } from '@vue/test-utils'
+<%_ } _%>
 <%_ if (!rootOptions.bare) { _%>
 import HelloWorld from '@/components/HelloWorld.vue'
 
@@ -18,10 +22,28 @@ describe('HelloWorld.vue', () => {
 })
 <%_ } else { _%>
 import App from '@/App.vue'
+<%_ if (!hasRouter) { _%>
 
 test('App should work', () => {
   const wrapper = shallowMount(App)
   expect(wrapper.text()).toMatch(`Welcome to Your Vue.js + TypeScript App`)
 })
+
+<%_ } else {_%>
+import VueRouter from 'vue-router'
+import router from '@/router'
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+
+test('App should render default route', () => {
+  const wrapper = mount(App, {
+    localVue,
+    router
+  })
+  expect(wrapper.text()).toMatch(`Welcome to Your Vue.js App`)
+})
+
+<%_ } _%>
 <%_ } _%>
 <%_ } _%>

Diff for: packages/@vue/cli-plugin-unit-mocha/__tests__/mochaGenerator.spec.js

@@ -85,3 +85,56 @@ test('TS + bare', async () => {
   expect(spec).toMatch(`const wrapper = shallowMount(App)`)
   expect(spec).toMatch(`expect(wrapper.text()).to.include(\`Welcome to Your Vue.js + TypeScript App\`)`)
 })
+
+test('bare + router', async () => {
+  const { files } = await generateWithPlugin([
+    {
+      id: 'unit-mocha',
+      apply: require('../generator'),
+      options: {}
+    },
+    {
+      id: '@vue/cli-service',
+      apply: () => {},
+      options: { bare: true }
+    },
+    {
+      id: 'router',
+      apply: () => {},
+      options: {}
+    }
+  ])
+
+  const spec = files['tests/unit/example.spec.js']
+  expect(spec).toMatch(`const wrapper = mount(App,`)
+  expect(spec).toMatch(`expect(wrapper.text()).to.include(\`Welcome to Your Vue.js App\`)`)
+})
+
+test('TS + bare + router', async () => {
+  const { files } = await generateWithPlugin([
+    {
+      id: 'unit-mocha',
+      apply: require('../generator'),
+      options: {}
+    },
+    {
+      id: 'typescript',
+      apply: () => {},
+      options: {}
+    },
+    {
+      id: '@vue/cli-service',
+      apply: () => {},
+      options: { bare: true }
+    },
+    {
+      id: 'router',
+      apply: () => {},
+      options: {}
+    }
+  ])
+
+  const spec = files['tests/unit/example.spec.ts']
+  expect(spec).toMatch(`const wrapper = mount(App,`)
+  expect(spec).toMatch(`expect(wrapper.text()).to.include(\`Welcome to Your Vue.js App\`)`)
+})

Diff for: packages/@vue/cli-plugin-unit-mocha/generator/index.js

@@ -3,7 +3,8 @@ module.exports = (api, options, rootOptions, invoking) => {
 
   api.render('./template', {
     isVue3,
-    hasTS: api.hasPlugin('typescript')
+    hasTS: api.hasPlugin('typescript'),
+    hasRouter: api.hasPlugin('router')
   })
 
   api.extendPackage({

Diff for: packages/@vue/cli-plugin-unit-mocha/generator/template/tests/unit/example.spec.js

@@ -1,6 +1,10 @@
 <%_ if (!hasTS) { _%>
 import { expect } from 'chai'
+<%_ if (!rootOptions.bare || !hasRouter) { _%>
 import { shallowMount } from '@vue/test-utils'
+<%_ } else { _%>
+import { mount, createLocalVue } from '@vue/test-utils'
+<%_ } _%>
 <%_ if (!rootOptions.bare) { _%>
 import HelloWorld from '@/components/HelloWorld.vue'
 
@@ -19,12 +23,32 @@ describe('HelloWorld.vue', () => {
 })
 <%_ } else { _%>
 import App from '@/App.vue'
+<%_ if (!hasRouter) { _%>
 
 describe('App', () => {
   it('should work', () => {
     const wrapper = shallowMount(App)
     expect(wrapper.text()).to.include(`Welcome to Your Vue.js App`)
   })
 })
+
+<%_ } else {_%>
+import VueRouter from 'vue-router'
+import router from '@/router'
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+
+describe('App', () => {
+  it('should render default route', () => {
+    const wrapper = mount(App, {
+      localVue,
+      router
+    })
+    expect(wrapper.text()).to.include(`Welcome to Your Vue.js App`)
+  })
+})
+
+<%_ } _%>
 <%_ } _%>
 <%_ } _%>

Diff for: packages/@vue/cli-plugin-unit-mocha/generator/template/tests/unit/example.spec.ts

@@ -1,6 +1,10 @@
 <%_ if (hasTS) { _%>
 import { expect } from 'chai'
+<%_ if (!rootOptions.bare || !hasRouter) { _%>
 import { shallowMount } from '@vue/test-utils'
+<%_ } else { _%>
+import { mount, createLocalVue } from '@vue/test-utils'
+<%_ } _%>
 <%_ if (!rootOptions.bare) { _%>
 import HelloWorld from '@/components/HelloWorld.vue'
 
@@ -19,12 +23,32 @@ describe('HelloWorld.vue', () => {
 })
 <%_ } else { _%>
 import App from '@/App.vue'
+<%_ if (!hasRouter) { _%>
 
 describe('App', () => {
   it('should work', () => {
     const wrapper = shallowMount(App)
     expect(wrapper.text()).to.include(`Welcome to Your Vue.js + TypeScript App`)
   })
 })
+
+<%_ } else {_%>
+import VueRouter from 'vue-router'
+import router from '@/router'
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+
+describe('App', () => {
+  it('should render default route', () => {
+    const wrapper = mount(App, {
+      localVue,
+      router
+    })
+    expect(wrapper.text()).to.include(`Welcome to Your Vue.js App`)
+  })
+})
+
+<%_ } _%>
 <%_ } _%>
 <%_ } _%>