Not working with Karma

[hashchange]

I don't normally start a bug report by praising the author, but I love your module when I run tests in the browser! :)

I love it a little less when I use Karma, though. Didn't get it to work.

I tried two different modifications in karma.conf.js, as suggested in the karma-mocha docs. The first,

  client: {
      args: [ 'require', 'mocha-clean' ]
  },

didn't actually clean up anything which wasn't clean already, and

  client: {
      mocha: {
          require: 'mocha-clean'
      }
  },

got me a TypeError: 'undefined' is not a function (evaluating 'this[opt](opts[opt])').

All modules are at their latest version, except for Mocha, which I have kept on the 1.x branch so far (1.21.5).

Any ideas how I can get it to work?

Thanks,

Michael

[rstacruz]

Ahh... this has always been a perenial problem with getting it to work with mocha runners. I think it's time to document the workaround.

[rstacruz]

I've written a rudamentary guide here:

https://github.com/rstacruz/mocha-clean/blob/master/docs/Using_with_mocha_loaders.md

Let me know if that works for you.

[rstacruz]

...either that, or try:

  client: {
      args: [ '--require', 'mocha-clean' ]
  },

let me know which one works, then I'll update the docs properly for everyone's benefit.

[rstacruz]

...also do try the test/mocha.opts trick... i feel that may work too

[hashchange]

Well I tried.

Turns out that npm dedupe doesn't act on devDependencies (took me a while to figure that out); I also had go back to an earlier version of Mocha to fix a conflict blocking dedupe. At the end of the day, it didn't help. I've tried all your suggestions, but there hasn't been any effect on the output.

Thanks anyway. I'm happy to see it working in the browser, and I think I'll leave it at that.

[johnpapa]

i tried the workarounds too, but it seems it only works in the browser. not with gulp nor karma (nor gulp running karma)

[davidosomething]

also not working, test repo here:
https://github.com/davidosomething/coffeetest/tree/mocha-clean

npm install
npm test

• ran shrinkwrap and dedupe
• required in the gruntfile if using grunt runner (which npm test invokes)
• karma conf in config/karma.conf.coffee -- has the client args AND requires explicitly
• mocha.opts in test/mocha.opts AND config/test/mocha.opts (tried this since karma uses paths relative to karma conf)
• example failing spec for this module in test/module-b/module-b.coffee
• have tried moving the require statement into outer scope instead of inside the module.export function
• have tried karma-mocha-reporter instead of karma-spec-reporter

noting that karma-mocha actually doesn't really support client args other than grep
https://github.com/karma-runner/karma-mocha/blob/master/src/adapter.js#L108
i'll file an issue there

[davidosomething]

screw it, problem solved by making a new reporter:
https://www.npmjs.com/package/karma-mocha-clean-reporter (beta I guess)

I'm using your module's exported function to format the stack before output https://github.com/davidosomething/karma-mocha-clean-reporter/blob/master/index.js#L167

[rstacruz]

thanks! however, mocha-clean should now be considered deprecated considering mocha 2.2.5 now has mocha-clean in it by default :)

[tregusti]

Good info, maybe update the readme?

[rodoabad]

How do you enable mocha-clean in 2.2.5?

[trueter]

@rstacruz Could you share your approach please? :)

[rstacruz]

Okay, mocha-clean isn't deprecated anymore—mocha has since reverted the mocha-clean patch into mocha.

Honestly don't know any other method than what's listed here — unfortunately as reported here, they don't really work. :\

[trueter]

I see, thanks for looking into it!

[levithomason]

I've opened karma-runner/karma#2313 to solve this in Karma core.

Turning this stack:

     AssertionError@/Users/levithomason/src/stardust/test/tests.bundle.js:296
:25 <- webpack:///~/assertion-error/index.js:74:0
      assert@/Users/levithomason/src/stardust/test/tests.bundle.js:4397:32 <- 
webpack:///~/chai/lib/chai/assertion.js:107:0
      /Users/levithomason/src/stardust/test/tests.bundle.js:8978:20 <- webpack
:///~/chai-enzyme/build/assertions/descendants.js:22:0
      descendants@/Users/levithomason/src/stardust/test/tests.bundle.js:8983:8
<- webpack:///~/chai-enzyme/build/assertions/descendants.js:27:0
      /Users/levithomason/src/stardust/test/tests.bundle.js:9525:24 <- webpack
:///~/chai-enzyme/build/ChaiWrapper.js:193:0
      /Users/levithomason/src/stardust/test/tests.bundle.js:3984:31 <- webpack
:///~/chai/lib/chai/utils/addMethod.js:41:0
      /Users/levithomason/src/stardust/test/tests.bundle.js:72950:31 <- webpac
k:///~/dirty-chai/lib/dirty-chai.js:114:0
      /Users/levithomason/src/stardust/test/tests.bundle.js:4103:39 <- webpack
:///~/chai/lib/chai/utils/overwriteMethod.js:49:0
      /Users/levithomason/src/stardust/test/tests.bundle.js:184887:116 <- webp
ack:///test/specs/views/Feed/Feed-test.js:20:0

Into this:

      test/specs/views/Feed/Feed-test.js:20:0

[IAMtheIAM]

Hello, what is the solution for this as of today? I still get huge error stack traces which make no sense when running a test.

[levithomason]

I've finished adding the formatError option to Karma, see the config docs.

Example usage in Semantic-UI-React can be seen here. In short, you get to filter each line of the stack, return an empty string to filter the line out. Return a string followed by a new line character to retain it. Obviously, you can also edit the line before returning it.

[IAMtheIAM]

Wow thank you, very fast response. I'll check your example :-)

[IAMtheIAM]

Got it working! Here's the final code I used that worked, in case anyone else stumbles accross this and needs help:

// karma.config.js

      formatError(msg) {

         // Uncommment this to get rid of the entire stack trace, but then you don't know what happened
         // return ''

         // filter out empty lines and node_modules
         if (!msg.trim() || /~/.test(msg) || /node_modules/.test(msg)) return ''

         // indent the error beneath the it() message
         let newLine = `  ${msg}`

         if (newLine.includes('webpack:///')) {
            // remove webpack:///
            newLine = newLine.replace('webpack:///', '')

            // remove bundle location, showing only the source location
            newLine = newLine.slice(0, newLine.indexOf(' <- '))
         }

         return `${newLine}\n`
      },