Unit test doesn't support typescript

[yalishizhude]

I use vue-componet-class in project, it works well.
But unit test can not watch and cannot report coverage.
That's really very bad~
Is there any good suggestion or solution?

[LinusBorg]

Reason: This template is not designed with typescript in mind.
Solution: No idea, your problem description doesn't tell me much.

[yalishizhude]

@LinusBorg

1. Support typescript
2. It can auto reload when I‘m writing unit test

[LinusBorg]

We will do a separate template for typescript towards the end of the year. This one here will not explicitly support it.

However, I know a couple of people who use this template with type script and vue-vlsss-component, and don't have any problems, so I can't tell where your rpoblem is coming from.

What I can do is make an educated guess: are you using any of the following for your project :

• Dropbox / OneDrive / Google drive etc.
• vagrant
• docker
• phpstorm or a similar ide

Those are known to interfere with web packs default way of observing file changes.

The solution is usually to switch to polling (#946)

In phpstorm, I usually have to turn off some weird save protect feature.

[ffxsam]

@LinusBorg I'm having the same issue with a fresh project using the webpack template.

Here's the result of yarn test:

ERROR in ./src/components/HelloWorld.vue
Module not found: Error: Can't resolve 'ts-loader' in '/Users/samh/Code/ts-test/src/components'
 @ ./src/components/HelloWorld.vue 8:0-130
 @ ./src ^\.\/(?!main(\.js)?$)
 @ ./test/unit/index.js
30 11 2017 15:30:36.208:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
30 11 2017 15:30:36.209:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
30 11 2017 15:30:36.239:INFO [launcher]: Starting browser PhantomJS
30 11 2017 15:30:38.018:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket z19UFgN5G5asK_IUAAAA with id 2626560
30 11 2017 15:30:38.210:WARN [reporter]: SourceMap position not found for trace: undefined
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: Cannot find module "!!ts-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0&bustCache!./HelloWorld.vue"
  at index.js:72

After adding ts-loader and typescript as dev dependencies, I tried again and got this:

ERROR in /Users/samh/Code/ts-test/tsconfig.json
[tsl] ERROR
      TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '[]'.
 @ ./src/components/HelloWorld.vue 8:0-130
 @ ./src ^\.\/(?!main(\.js)?$)
 @ ./test/unit/index.js

ERROR in ./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/HelloWorld.vue
Module build failed: error while parsing tsconfig.json
 @ ./src/components/HelloWorld.vue 8:0-130
 @ ./src ^\.\/(?!main(\.js)?$)
 @ ./test/unit/index.js
30 11 2017 15:33:01.648:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
30 11 2017 15:33:01.650:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
30 11 2017 15:33:01.653:INFO [launcher]: Starting browser PhantomJS
30 11 2017 15:33:03.426:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket PI4l5tSd-DqrrQE0AAAA with id 85387804
30 11 2017 15:33:03.606:WARN [reporter]: SourceMap position not found for trace: undefined
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: Module build failed: error while parsing tsconfig.json
  at index.js:12019

This is my tsconfig.json, recommended by the official Vue docs:

{
  "compilerOptions": {
    // this aligns with Vue's browser support
    "target": "es5",
    // this enables stricter inference for data properties on `this`
    "strict": true,
    // if using webpack 2+ or rollup, to leverage tree shaking:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

The only TypeScript code I've added is in HelloWorld.vue, just as a test:

<script lang="ts">
function doit(val: string): void {}
export default {
  name: 'HelloWorld',
  methods: {
    fake() {
      doit(123);
    },
  },
};
</script>

[silverbackdan]

@ffxsam - You've probably already soled this but for anyone stumbling across this issue, a good template for Nuxt is here:
https://github.com/nuxt-community/typescript-template/tree/master/template

This article is good too:
https://frontendsociety.com/writing-single-file-components-vue-files-in-typescript-vue-class-component-vs-vue-extend-c5c1d8e47b7

[ffxsam]

Yep, no longer an issue with Vue CLI 3. Thanks!