fix: improve jest/mocha add compat with typescript

Author: yyx990803

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

@@ -1,5 +1,8 @@
-module.exports = api => {
-  api.render('./template')
+module.exports = (api, _, __, invoking) => {
+  api.render('./template', {
+    hasTS: api.hasPlugin('typescript')
+  })
+
   api.extendPackage({
     scripts: {
       'test:unit': 'vue-cli-service test:unit'
@@ -60,16 +63,15 @@ module.exports = api => {
       })
     }
   } else {
-    applyTS(api)
+    applyTS(api, invoking)
   }
 
   if (api.hasPlugin('eslint')) {
     applyESLint(api)
   }
 }
 
-const applyTS = module.exports.applyTS = api => {
-  // TODO inject type into tsconfig.json
+const applyTS = module.exports.applyTS = (api, invoking) => {
   api.extendPackage({
     jest: {
       moduleFileExtensions: ['ts', 'tsx'],
@@ -90,6 +92,22 @@ const applyTS = module.exports.applyTS = api => {
       }
     })
   }
+  // inject jest type to tsconfig.json
+  if (invoking) {
+    api.render(files => {
+      const tsconfig = files['tsconfig.json']
+      if (tsconfig) {
+        const parsed = JSON.parse(tsconfig)
+        if (
+          parsed.compilerOptions.types &&
+          !parsed.compilerOptions.types.includes('jest')
+        ) {
+          parsed.compilerOptions.types.push('jest')
+        }
+        files['tsconfig.json'] = JSON.stringify(parsed, null, 2)
+      }
+    })
+  }
 }
 
 const applyESLint = module.exports.applyESLint = api => {

packages/@vue/cli-plugin-unit-jest/generator/template/tests/unit/HelloWorld.spec.js

@@ -1,3 +1,4 @@
+<%_ if (!hasTS) { _%>
 import { shallowMount } from '@vue/test-utils'
 import HelloWorld from '@/components/HelloWorld.vue'
 
@@ -10,3 +11,4 @@ describe('HelloWorld.vue', () => {
     expect(wrapper.text()).toMatch(msg)
   })
 })
+<%_ } _%>

packages/@vue/cli-plugin-unit-jest/generator/template/tests/unit/HelloWorld.spec.ts

@@ -0,0 +1,14 @@
+<%_ if (hasTS) { _%>
+import { shallowMount } from '@vue/test-utils'
+import HelloWorld from '@/components/HelloWorld.vue'
+
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message'
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg }
+    })
+    expect(wrapper.text()).toMatch(msg)
+  })
+})
+<%_ } _%>

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

@@ -1,5 +1,7 @@
-module.exports = api => {
-  api.render('./template')
+module.exports = (api, _, __, invoking) => {
+  api.render('./template', {
+    hasTS: api.hasPlugin('typescript')
+  })
 
   api.extendPackage({
     devDependencies: {
@@ -16,7 +18,7 @@ module.exports = api => {
   }
 
   if (api.hasPlugin('typescript')) {
-    applyTS(api)
+    applyTS(api, invoking)
   }
 }
 
@@ -31,12 +33,30 @@ const applyESLint = module.exports.applyESLint = api => {
   })
 }
 
-const applyTS = module.exports.applyTS = api => {
-  // TODO inject type into tsconfig.json
+const applyTS = module.exports.applyTS = (api, invoking) => {
   api.extendPackage({
     devDependencies: {
       '@types/mocha': '^5.2.4',
       '@types/chai': '^4.1.0'
     }
   })
+  // inject mocha/chai types to tsconfig.json
+  if (invoking) {
+    api.render(files => {
+      const tsconfig = files['tsconfig.json']
+      if (tsconfig) {
+        const parsed = JSON.parse(tsconfig)
+        const types = parsed.compilerOptions.types
+        if (types) {
+          if (!types.includes('mocha')) {
+            types.push('mocha')
+          }
+          if (!types.includes('chai')) {
+            types.push('chai')
+          }
+        }
+        files['tsconfig.json'] = JSON.stringify(parsed, null, 2)
+      }
+    })
+  }
 }

packages/@vue/cli-plugin-unit-mocha/generator/template/tests/unit/HelloWorld.spec.js

@@ -1,3 +1,4 @@
+<%_ if (!hasTS) { _%>
 import { expect } from 'chai'
 import { shallowMount } from '@vue/test-utils'
 import HelloWorld from '@/components/HelloWorld.vue'
@@ -11,3 +12,4 @@ describe('HelloWorld.vue', () => {
     expect(wrapper.text()).to.include(msg)
   })
 })
+<%_ } _%>

packages/@vue/cli-plugin-unit-mocha/generator/template/tests/unit/HelloWorld.spec.ts

@@ -0,0 +1,15 @@
+<%_ if (hasTS) { _%>
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import HelloWorld from '@/components/HelloWorld.vue'
+
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message'
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg }
+    })
+    expect(wrapper.text()).to.include(msg)
+  })
+})
+<%_ } _%>