Unable to run TypeScript tests using the poi-preset-karma #264

https://github.com/padcom/poi-vue-ts-minimal/blob/8b74a7aead956111d7c6d941a142b4480e2f6816/test/unit/example.test.js#L1

you don't need to (and you can't) import those from karma, they are global variables from mocha

In addition to what @egoist said (remove your imports). Your test is failing because mocha is not included for some reason:

module.exports = {
  presets: [
    require('poi-preset-karma')({
      frameworks: ['chai', 'mocha'],
    }),
  ],
}

Add mocha to frameworks and you are good to go. (ps: you can add it to your karma section as well, you don't have to move it into the preset config)

<img width="1394" alt="screen shot 2017-10-27 at 12 09 55 pm" src="https://user-images.githubusercontent.com/247048/32087674-0f060c16-bb10-11e7-8b70-af9143b93088.png">

The preset will default to mocha, but is overwritten by your frameworks key:

https://github.com/egoist/poi/blob/master/packages/poi-preset-karma/index.js#L64

@egoist mocha is added as a reporter so maybe we should push mocha to frameworks as well?

https://github.com/egoist/poi/blob/master/packages/poi-preset-karma/index.js#L80

The docs says mocha will be included https://github.com/egoist/poi/tree/master/packages/poi-preset-karma#advanced 😆

Then we should update the doc 😄 people might not use mocha so it should be possible to override frameworks

What about the reporter that is forcefully set. Should that also default to mocha only?

@mblarsen ah yeah, it's currently merged with default reporters using lodash.merge, seems we have three solutions:

1. change to Object.assign
2. expose reporters option
3. allow karma option to be a function, karma(defaultConfig) { return newConfig } so we can override reporters by assign defaultConfig.reporters to a new value.

I think users are less likely to change reporters than the frameworks.

I think users who just want to use the preset out-of-the box are fine with mocha.

So we are considering the cases where you want a different setup and then otherwise default to mocha.

reporters: ['mocha'].concat(coverage ? ['coverage'] : []),

I don't know if other test frameworks will use coverage reporter as well. I'm guessing they will. But if not it should at least be possible to overwrite.

I think the following changes are fine:

1. Update docs, remove the part about mocha will automatically be included
2. Expose reporters but default to 'mocha' just like frameworks
3. Concat coverage like above
4. If you still want "more power" and get rid of coverage you can provide reporters in the karma section that will override the poi presets (will it?)

Well, the suggested changes did work. I is very confusing though about the need to not import describe and it. Very strange...

Anyways, thank you for your help! Poi looks better and better all the time!

One last problem (I hope): when I switched to TypeScript Karma won't find any tests. Is there something that can be done about it?

Example project updated to show the problem

I is very confusing though about the need to not import describe and it. Very strange...

That is just how karma (and similar frameworks) work.

One last problem (I hope): when I switched to TypeScript Karma won't find any tests. Is there something that can be done about it?

Could it be that you are excluding the test files:

require('poi-preset-karma')({
      frameworks: [ 'mocha', 'chai' ],
      files: [ 'test/unit/*.test.js' ]
    }),

The pattern 'test/unit/*.test.js' doesn't match your test file test/unit/example.test.ts

@padcom Hmm, I looked into it some more and you'll need a few more things.

You'll need to install yarn add --dev karma-typescript and then add it to frameworks, reporters and preprocessors:

module.exports = {
  entry: './src/index.ts',
  presets: [
    require('poi-preset-typescript')({}),
    require('poi-preset-karma')({
      files: [ 'test/unit/*.test.ts' ],
    }),
  ],
  karma: {
    frameworks: ['mocha', 'chai', 'karma-typescript'],
    reporters: ['mocha', 'karma-typescript'],
    preprocessors: { 'test/unit/*.test.ts': ['webpack', 'karma-typescript'] },
  },
}

This runs the tests for me now. Hope it helps :)

After https://github.com/egoist/poi/pull/265 this is merged it will be a bit easier.

@egoist is there a way to detect which presets are used from within another preset? I was thinking if to add the typescript support to the karma preset and sort of need a way to detect (could of course look at the files, although I could think of cases where that would not be enough)

@mblarsen you can check if there's typescript rule: https://github.com/egoist/poi/blob/fe036973d73290a5ada64cc80e586c066b7ed048/packages/poi-preset-typescript/index.js#L16

I ran it with the karma-typescript package which worked just fine. See above @egoist

@mblarsen It did solve the problem. The only thing I'd like to add to it is it looks ugly by comparison to everything else. I hope #265 will do. While you're at it I found an interesting problem with the module setting for Karma. I had to use the following to make it work with es2016:

    karmaTypescriptConfig: {
      tsconfig: './tsconfig.json',
      compilerOptions: {
        module: 'commonjs'
      },
      exclude: [ 'node_modules' ]
    },

Otherwise the familiar

error TS2339: Property 'assign' does not exist on type 'ObjectConstructor'.

error would appear.

Maybe it'd make sense to make the module setting to commonjs? It's just required when running karma tests

Oh and yes, I did have to change the settings in tsconfig.json to update the target to make the error go away

it looks ugly by comparison to everything else.

Which is? @padcom

Can you show your full config now + the tsconfig.json? I'll try to work it into the karma test preset however it makes sense.

module.exports = {
  presets: [
    require('poi-preset-babel-minify')(),
    require('poi-preset-typescript')(),
    require('poi-preset-karma')(),
  ],

  entry: './src/index.ts',

  webpack(config) {
    config.output.publicPath = ''
    config.devtool = 'inline-source-map'
    return config
  },
  devServer: {
    proxy: {
      '**': {
        target: 'https://jsonplaceholder.typicode.com',
        changeOrigin: true,
      }
    }
  },

  karma: {
    files: [ 'test/unit/**/*.test.ts' ],
    frameworks: [
      'mocha', 'chai', 'karma-typescript'
    ],
    reporters: [
      'mocha', 'karma-typescript'
    ],
    preprocessors: {
      'test/unit/*.test.ts': [ 'webpack', 'karma-typescript' ]
    },
    karmaTypescriptConfig: {
      tsconfig: './tsconfig.json',
      compilerOptions: {
        module: 'commonjs'
      },
    },
  }
}

The karma configuration, besides the frameworks and files is something that I believe would be fantastic if it wouldn't have to be there

Also if you ignore for a moment the webpack and devserver portion of the configuration then what is really required (entry, presets) is all together shorter than what is needed to make TS work with Karma. Feels like it a bit much to do one thing for which there is already a ready-made preset.

Won't make the changes right now @padcom but hope you'll be willing to test it afterwards.

@mblarsen Count on it!

Is any of this really necessary for the ts karma stuff to work?

  webpack(config) {
    config.output.publicPath = ''
    config.devtool = 'inline-source-map'
    return config
  },

None of it - that's just me making the produced index.html path-agnostic and me playing around with webpack's devtool. Both options are completely safe to be ignored

@padcom a few questions

1. would this be common defaults for typescript testing in karma?

karmaTypescriptConfig: {
      tsconfig: './tsconfig.json',
      compilerOptions: {
        module: 'commonjs'
      },
    },

2. Will there always be a .tsconfig.json file? and what happens if there is not?

3. Why do we need the commonjs compile option again?

It seems to be the case that you always have a .tsconfig.json yes? http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

And that it is customary for ts to use commonjs

@mblarsen

1. I think Karma/Mocha needs commonjs modules for some reason. So the answer is yes
2. Currently the ./tsconfig.json is the default file picked up by typescript compiler as far as I know. For some reason Karma uses its own and disregards the project-wide configuration that all other tools that use typescript compiler use. So I'd say make it a default and if someone wants to override a certain setting they can do it in the poi.config.js like I did here.
3. see 1

Also please note it is "tsconfig.json" - it does not start with a dot like for example .babelrc

Karma/Mocha needs commonjs

It doesn't, but may it does with typescript, I could see that is the default module format from the link I shared above.

Thanks for pointing out about the . absence

I think I have what I need to make the changes. Is your example repo updated with what you've shared here then I could also use that to test.

@padcom

That repo is basically a sanbox for me to try out poi so it will change over time but at this point it has all the changes.

is this working now? karma preset has been updated with typescript support.

@padcom I used your repo to test and this is working for me now:

``` module.exports = { entry: './src/index.ts', presets: [ require('poi-preset-babel-minify')(), require('poi-preset-typescript')(), require('poi-preset-karma')({ files: [ 'test/unit/*/.test.ts' ], }), ], }

That's awesome news! This is the most declarative project description ever :) Thank you!!

I have given it a shot. It works nicely until you try to import App.vue. I have updated the project - can you take a look?

I will, my mistake. I had thought it was already included.

@padcom created a PR on your repo. I see there are issues with coverage, but let's not focus on that for now. One thing at a time :)

@mblarsen

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

is there to tell TypeScript what files .vue extension are.

After merging your branch, doing npm install and npm test this is what I have:

Entry module not found: Error: Can't resolve 'ts-loader' in '/home/mhryn/projects/poi-vue-ts-minimal'
Entry module not found: Error: Can't resolve 'ts-loader' in '/home/mhryn/projects/poi-vue-ts-minimal'

 FAIL  Compiled with errors!


ERROR in Entry module not found: Error: Can't resolve 'ts-loader' in '/home/mhryn/projects/poi-vue-ts-minimal'

ERROR in Entry module not found: Error: Can't resolve 'ts-loader' in '/home/mhryn/projects/poi-vue-ts-minimal'
npm ERR! Test failed.  See above for more details.

I see that as part of your PR you have removed the ts-loader (and a few others). I assumed they are transitive dependencies but it seems they aren't as there is no ts-loader module in node_modules now.

Using npm version 5.3.0

Correct ts-loader is a dependency of the typescript preset.

Here is what I do https://asciinema.org/a/q5ltkKRbuTSXp6TDNXU8yhzuf

so, case closed? 😄

I'm not sure what the Vue test error is if you look at the recording, but it is not related to this issue.

I suggest closing and then if there is a conflict with ts and vue then open a new ticket about that.

Guys, it clearly shows that the loaded module is not a module but just a string (import App from './App.vue')

Do you think that's not a problem with how webpack/karma is setup?

@padcom where does it clearly say that? Please provide more details.

It's enough to add this code to see the issue

https://github.com/padcom/poi-vue-ts-minimal/pull/1/files#diff-6d6278d5104e10f9810d22ada830b27cL4

import AppA from '../../../src/components/App.vue'
import * as AppB from '../../../src/components/App.vue'

console.log(AppA)
console.log(AppB)

Anyways, we'll just have to assume for now that Vue and TypeScript in a full-fledged project using POI is not possible and move on.

And by full fledged I mean app + tests

Or you could help resolve the issue :)

When I add typescript to the script of the Vue file the typescript processing surely kicks in:

// App.vue
<template> ... </template>
<script lang="typescript"> ... </script>

I'm getting a bunch of typescript related import errors. Would you happen to know what it is about?

Module build failed: Error: Cannot find module 'typescript/bin/lib.d.ts'

@egoist It's lang="ts" as per the loader name (ts-loader). Unfortunately I don't know anything about those import errors, sorry.

I got Typescript+Karma setup working with help from @gluons some time ago: https://github.com/egoist/poi/issues/240#issuecomment-330583695

That approach is broken now though :/

Got tests working: demo repo.

I'm not entirely sure what is happening, but it seems that setting karma-typescript as framework inside the poi-preset-karma is enough to get everything working correctly and passing karma-typescript to the list of preprocessors here in poi-preset-karma will break everything.

You can explicitly pass a list of karma preprocessors in poi.config.js:

module.exports = {
    presets: [
        ...
    ],
    ...,
    karma: {
        mime: {
            'text/x-typescript': ['ts']
        },
        preprocessors: {
            'test/unit/*.ts': ['webpack', 'sourcemap']
        }
    }
};

@AleksueiR I worked on the typescript-karma stuff, but I'm not using neither.

1. With your setup is code coverage working as well?
2. Would you be able to make a PR for this?

1. Coverage doesn't work out of the box, and I can't make it pick up any source files.
2. I can PR that change, but I'm still not sure if it's a valid fix or a hack that works for some reason (all samples I saw that used karma-typescript specify it as a preprocessor - why tests work without it baffles me).

@0maxxam0 has funded $30.00 to this issue.

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

This issue has been marked as Stale, it will be closed in a week if there's no furthur activity.

Hmm? Bot?