Jest, snapshots and styled-jsx

[olaj]

I want to remove the generated "css noise" from my component when generating snapshots. Babel, webpack and so on is still kind of a black-magic for me so i can't really figure out how to solve it.

Is this documentation up-to-date?

https://github.com/zeit/styled-jsx#rendering-in-tests

It sounds really simple there that you should just add that 'styled-jsx/babel-test' plugin but it doesn't do anything for me? I have confirmed that my NODE_ENV actually is test.

I can't get it to work. And when i read for example https://nextjs.org/docs/advanced-features/customizing-babel-config it seems like i should not use the plugins section? But i have no idea what to do there really and how to make it "Per env".

[olaj]

I've also found this and if i understand it correctly it should even work "out-of-the-box" now?

#6205

[rafinskipg]

@olaj I have this code, I am not sure if it's the thing you need but take a look

• config-jest/cssTransform.js

module.exports = {
  process() {
    return 'module.exports = {};'
  },
  getCacheKey() {
    return 'cssTransform'
  },
}

• jest.config.js

// require('dotenv').config()
const { defaults } = require('jest-config')

module.exports = {
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**',
    '!**/*.config.js',
  ],
  collectCoverage: true,
  coveragePathIgnorePatterns: [
    '/node_modules/',
    '/public/',
    '/coverage/',
    'enzyme.js',
    '/jest.config.js',
    '/.next/',
  ],
  testMatch: ['<rootDir>/test/**/*.test.js'],
  setupFilesAfterEnv: ['<rootDir>/test/setupTests.js'],
  testPathIgnorePatterns: ['/node_modules/', '/.next/', '/public/', '/coverage/'],
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
    '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform',
    // '^.+\\.(css)$': '<rootDir>/test/config-jest/cssTransform.js',
  },
  transformIgnorePatterns: [
    '/node_modules/',
    '/public/',
    '^.+\\.module\\.(css|sass|scss)$',
  ],
  moduleNameMapper: {
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
  },
}

test command:

"test": "jest --watch",
"test:ci": "jest --ci"

[olaj]

Thanks! But my tests runs fine and everything. I just want to get rid of the "jsx-12435663" class names in my snapshots since they always give false positives and well i simply ignore snapshot tests as it is now.

But maybe something in your code fix that?

[rafinskipg]

No, i don't think so. Can you share your config and an example test so I can try it out?

[olaj]

Sorry for the slow reply here but now i just tested with:

https://github.com/vercel/next.js/tree/canary/examples/with-typescript-eslint-jest

Then modified the .babelrc to

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

Then i created a snapshot. And i still get all the "jsx-124" on all of the elements.

<h1 class="jsx-1639065953 title" > Welcome to <a class="jsx-1639065953" href="https://nextjs.org" > Next.js! </a> </h1> <p class="jsx-1639065953 description" > Get started by editing <code class="jsx-1639065953" > pages/index.tsx </code> </p>

Am I missing something?

[jamesmosier]

It looks like Next automatically includes the styled-jsx/babel-test plugin when your NODE_ENV=test: #7747

And I believe your .babelrc should be formatted similar to this in order to load the plugin:

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

Also here is a previous issue discussing this #6205

[olaj]

Strange. If it's included automatically it should just work with

https://github.com/vercel/next.js/tree/canary/examples/with-typescript-eslint-jest

i supposed? I mean without even changing anything in the .babelrc, but it doesn't :)

[Vadorequest]

@olaj Take a look at my Jest configuration, I bet you'll learn quite a few things.

https://github.com/UnlyEd/next-right-now/tree/v2-mst-aptd-gcms-lcz-sty

It uses Jest, snapshots, TS and more!

[etiennejcharles]

I went ahead and opened this issue, I'm getting the same error as @olaj
vercel/styled-jsx#649

[etiennejcharles]

Got the solution
https://nextjs.org/docs/advanced-features/customizing-babel-config

This made it work for me

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

the "babel-test": true
Does the whole magic. 😆