glamorous: Cannot read property 'div' of undefined

[screendriver]

First: I created the same issue at Jest jestjs/jest#3374 because I don't know if it's TypeScript or Jest related. I hope anyone can help me out of this. I just copy the same text as in the Jest issue for simplicity.

Do you want to request a feature or report a bug?

I think this is a bug.

What is the current behavior?

 FAIL  build/test/client/bla.test.js
  ● foo

    TypeError: Cannot read property 'div' of undefined
      
      at Object.<anonymous>.test (build/test/client/bla.test.js:8:38)
      at process._tickCallback (internal/process/next_tick.js:109:7)

If the current behavior is a bug, please provide the steps to reproduce and either a repl.it demo through https://repl.it/languages/jest or a minimal repository on GitHub that we can yarn install and yarn test.

I've made a repo here. Just run yarn install && yarn test. In my webpack production build the code runs. It only crashes when I run it in Jest.

I believe it has anything to do that glamorous defines module and jsnext:main in their package.json and webpack evaluates the flags and can interpret the exports and imports correctly. The default main points to a CommonJS package. TypeScripts however transpiles my test code to

var glamorous_1 = require("glamorous");
...glamorous_1.default.div...

and crashes because .default does not exist. It should look like

var glamorous_1 = require("glamorous");
...glamorous_1.div...

So I am not sure if this is TypeScript or Jest related. But as webpack is doing everything right I think this is Jest related.

What is the expected behavior?

It should run the test.

Please provide your exact Jest configuration and mention your Jest, node, yarn/npm version and operating system.

I set up a sample project where you can reproduce it easily.

[ds300]

Thanks for the thorough report :) Can you try adding allowSyntheticDefaultImports: true to your tsconfig.json ?

[kulshekhar]

@screendriver I cloned the repo and executed yarn install followed by yarn test and got the following result:

yarn test v0.23.2
$ jest 
No tests found
No files found in /home/user/tmp/jest-glamorous.
Make sure Jest's configuration does not exclude this directory.
To set up Jest, make sure a package.json file exists.
Jest Documentation: facebook.github.io/jest/docs/configuration.html
Done in 0.90s.

[screendriver]

Thanks for the thorough report :) Can you try adding allowSyntheticDefaultImports: true to your tsconfig.json ?

Thank you for the quick response ☺️ I already did that. It doesn't change anything 😕 By the way: allowSyntheticDefaultImports does not modify the output. It is only available at compile time.

@kulshekhar 🤔

[kulshekhar]

@screendriver that's weird

[kulshekhar]

@screendriver can you try updating tsconfig.json to the following and test?

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "sourceMap": false,
    "jsx": "react"
  }
}

[screendriver]

That's really weird 😳 🤔

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "sourceMap": false,
    "jsx": "react"
  }
}

does not change anything unfortunately 😞

[kulshekhar]

after changing this, did you run jest with --no-cache?

[kulshekhar]

Just tested this - "allowSyntheticDefaultImports": true fixes this issue.

[screendriver]

Oh my god! You are right! 💃 🎉

Thank you so much @kulshekhar and @ds300 It's working now! 😎

The only thing I'm getting now is

 console.error node_modules/fbjs/lib/warning.js:36
    Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

but this is not related to ts-jest

[ds300]

By the way: allowSyntheticDefaultImports does not modify the output. It is only available at compile time.

This is true of tsc, but ts-jest uses the setting to decide whether it needs to compile import statements with babel. Otherwise we can end up with the same errors you are seeing because jest requires commonjs module syntax while other targets require es6 module syntax e.g. react-native and rollup.

However, this does raise an interesting question as to whether we should add a ts-jest specific config setting for this feature, rather than using allowSyntheticDefaultImports. The two concepts are strongly related, but does one strictly imply the other?

[screendriver]

However, this does raise an interesting question as to whether we should add a ts-jest specific config setting for this feature, rather than using allowSyntheticDefaultImports

I'm sure I am not the only one with this issue in the future 😉 So yes, I would add a ts-jest specific config option for that.

[kulshekhar]

I think it's safe to use allowSyntheticDefaultImports as an indicator to compile with babel.

If someone is using such imports, not transpiling further with babel will throw an error because Jest won't know how to process that.