glamorous: Cannot read property 'div' of undefined

First: I created the same issue at Jest https://github.com/facebook/jest/issues/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 ?

[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?