Styled-jsx: Bug: Tests still render jsx-123 classNames

[etiennejcharles]

Given I install the jest example https://github.com/vercel/next.js/tree/canary/examples/with-jest
And have the described .babelrc configuration in the docs here

{
  "presets": ["next/babel"],
  "env": {
    "production": {
      "plugins": ["styled-jsx/babel"]
    },
    "development": {
      "plugins": ["styled-jsx/babel"]
    },
    "test": {
      "plugins": ["styled-jsx/babel-test"]
    }
  }
}

And add a styled jsx to the index file.

<style jsx>{`
    main {
        background-color: red;
    }
`}
</style>

Then run tests via npm run test
Actual: My snaphots gets a jsx-123 ❌ id
Expected: My snapshots shouldn't have any ids given I'm running in a test environnement based on this doc ✅

That commit should have fixed that issue, maybe there was regression
@timneutkens Maybe you could point me in the right direction - I might be using the babel config wrong.

• OS: Mac 10.14.9
• Browser: Node v.13.14.1
• styled-jsx (version): 3.3.0
• Next: 9.9.4

Tried reverting styled-jsx until version as far as 2.2.7 and this still fails on Next 9.9.4 version

[giuseppeg]

Hi @etiennejcharles Next's preset includes styled-jsx so in order to configure it you need to pass options to it as described here https://nextjs.org/docs/advanced-features/customizing-babel-config

Specifically the option for disabling the babel plugin is "babel-test": true.

Finally make sure that process.env.NODE_ENV is set to test.

hope this helps

[etiennejcharles]

I took me some time to get it, but I think what you meant is this:

{
  "presets": ["next/babel"],
  "env": {
    "test": {
      "presets": [
        [
          "next/babel",
          {
            "styled-jsx": {
              "babel-test": true
            }
          }
        ]
      ]
    }
  }
}

Is there a way to simplify that ? 😆
Il probably provide a PR -
I've been debugging the nextjs/preset file by console logging it (didn't have a better idea to debug this. )

If that's the way, then Il probably submit a PR in the docs

[Hyokune]

I took me some time to get it, but I think what you meant is this:

{
  "presets": ["next/babel"],
  "env": {
    "test": {
      "presets": [
        [
          "next/babel",
          {
            "styled-jsx": {
              "babel-test": true
            }
          }
        ]
      ]
    }
  }
}

Is there a way to simplify that ? 😆
Il probably provide a PR -
I've been debugging the nextjs/preset file by console logging it (didn't have a better idea to debug this. )

If that's the way, then Il probably submit a PR in the docs

I've added this to my .babelrc file and also set NODE_ENV=test before running the test command, but I still seem to getting the error Warning: Receivedtruefor a non-boolean attributejsx`.

Is there anything else I've missed for this to work?