Emotion: Issues with Jest, Typescript and Emotion Babel Plugin

[samcooke98]

• emotion version: 9.1.3
• react version:16.3.2
  [email protected]

What you did:
I have a project that uses Typescript & React with Babel for testing, and Webpack to build.

I had a basic component, using emotion.div({styles}, and was attempting to write a basic snapshot test.

To accomplish the testing, I use TS-jest as recommended in the tsconfig repo. That is, according to the last couple of paragraphs here.

TS loader compiles the modules to commonjs (cjs). Then the babel plugin is run on the cjs code. At this point, I began to get errors and struggle.

What happened:

At this point, I was getting errors about needing to include the babel-plugin-emotion . This confused me, as I had it in my babelrc, and it was working when I built the code with Webpack.

It appears to be erroring because babel-plugin-emotion cannot run on cjs code.

Reproduction:

https://github.com/samcooke98/tsjest-emotion-issue

Problem description:
As ts-jest will silently update the module format to be commonjs, unless the user specifies a different one. According to #535 - Babel-plugin-emotion doesn't work on commonjs. This can result in confusing errors and difficulty getting the right configuration for Typescript and Jest.

Suggested solution:
I believe the first step would be to place something in the documentation about configuring Emotion with Typescript\Jest

I think a better solution, would be to make babel-plugin-emotion work with cjs code, but I am unsure of the technical complexity.

Hopefully, this is all clear.

[vadistic]

Hey @samcooke98 - I just gave it a quick spin and it works. With standard commonjs modules config for jest.

Here's some guesswork:

// This passes and snapshots looks ok
  it('shorthand div', () => {
    const Box = styled.div({
      padding: '20px',
      backgroundColor: 'silver',
    })

    const tree = renderer.create(<Box> Box </Box>).toJSON()

    expect(tree).toMatchSnapshot()
  })

I had same problem as you for a minute and it was connected with ENV variables, I'm pretty sure your's too.

If you followed official docs your .babelrc setup should look a bit like this:

{
  "env": {
    "production": {
      "plugins": [["emotion", { "hoist": true }]]
    },
    "development": {
      "plugins": [["emotion", { "sourceMap": true, "autoLabel": true, "labelFormat": "⚡[local]" }]]
    },
  }
}

And I'm pretty sure that without other configs when you run test your env could be set to NODE_ENV=test. so babel-plugin-emotion does not load for you.

1) Set your NODE_ENV=test explicitly for tests (i.e cross-env)
2) Add "test" env case to your .babelrc

    "test": {
      "plugins": [["emotion", { "sourceMap": true, "autoLabel": true, "labelFormat": "⚡[local]" }]]
    }

3) Make sure ts-jest is loading the right config in package.json#jest

"globals: {
      "ts-jest": {
        "useBabelrc": true,
        "tsConfigFile": "./config/tsconfig.test.json" // I have cjs modules set
      }
}

4?) I 'm also using jest-emotion (I don't think it should change anything, but just in case)

[samcooke98]

I've created a repo here to show the issue.
https://github.com/samcooke98/tsjest-emotion-issue

I tried what you suggested @vadistic but maybe I'm missing something, It didn't appear to solve the issue.

Maybe it's an issue with babel versions?

[Christopher2K]

@samcooke98 I think it's too late but nvm. I solved this by following @vadistic 's solution but in my case, I still have es2015 modules set.

[cameron-martin]

Related: https://github.com/emotion-js/emotion/issues/344

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[Jessidhia]

The problem seems to be that, because jest requires that modules are commonjs, ts-jest is _forcing_ the typescript compiler to run typescript's module transform (forcing module: 'commonjs') instead of following user options. By the time babel sees the code, it is already not a module, so the plugin is no longer able to detect the imports.

[Emiliano-Bucci]

Is there any new to this? I've tried @vadistic advice but without success, i keep getting Component selectors can only be used in conjunction with babel-plugin-emotion. Also, if i change "module": "commonjs" to "module": "es2015" in my tsconfig.jest.json, jest throw this -->
`Test suite failed to run

/Users/emiliano/Desktop/projects/my-life-in-trek/src/setupTests.ts:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "jest-dom/extend-expect";
                                                                                                ^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected string

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)`

This is frustrasting as hell

[Andarist]

The most likely issue that has caused is exactly what Jessica has described - module transformer running before babel. The issue got stale and repro case uses emotion@9 so I think it's appropriate to close this now - sorry that we couldn't get to it sooner. If the problem persists please report a new issue with a fresh repro case. Thank you for your understanding.