Doesn't work well with istanbul...

[kentcdodds]

I'll have to provide more info later, but if you using this with the babel-plugin-istanbul first, then it inserts the displayName assignment before the component is created. Totally bonkers. But it means that you can't use this when using --coverage with jest... At least that's what I found in the glamorous-website project. Which is really odd because that seems to work fine in my work project. 🤔

[bernard-lin]

Does this have something to do with the order in which plugins are loaded?

[kentcdodds]

Yes, and unfortunately with jest we have no control over the order (without a bunch of extra config). I'm unsure of the solution :-(

[dylanmoz]

@kentcdodds any thoughts? I'm running into this issue as well. I tried writing my own preprocessor, which ended up seeming to work but started spitting out different errors after adding more tests. Here was my simple attempt:

// package.json under "jest"
"transform": {
  "^.+\\.jsx?$": "<rootDir>/jestPreprocessor.js"
}

// jestPreprocessor.js
const babel = require('babel-core')

module.exports = {
  process(src, path, config) {
    const code = babel.transform(src, {
      "presets": [
        "env",
        "flow",
        "react"
      ],
      "plugins": [
        // other plugins...
        "glamorous-displayname",
        "istanbul"
      ]
    })

    return code
  }
}

[kentcdodds]

I solved it doing some fancy stuff with my babelrc (here's the real thing) :smile:

[dylanmoz]

@kentcdodds ah.. the irony. I was using the plugin to help with writing enzyme tests, i.e. component.find('SomeInnerGlamorousComponent'). I'll just switch out the string usage for the actual references and not use this plugin during tests.