Invalid value for prop css on <div> tag when running Jest

[kaseymccurdy]

Current behavior:
When running tests via Jest, I receive the following warning dozens of times in our output:

 Warning: Invalid value for prop `css` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://fb.me/react-attribute-behavior
          in div (at DrawerLayout.js:59)
          in DrawerContentGroup (at OrgIntegrationFacebookDrawer.js:38)
          in div (at DrawerLayout.js:49)
          in DrawerBody (at OrgIntegrationFacebookDrawer.js:36)
          in div (at DrawerLayout.js:17)
          in DrawerLayout (at OrgIntegrationFacebookDrawer.js:34)
          in div (at DrawerComponent.js:21)
          in div (created by ForwardRef(Paper))
          in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
          in WithStyles(ForwardRef(Paper)) (created by Transition)
          in Transition (created by ForwardRef(Slide))
          in ForwardRef(Slide) (created by ForwardRef(Drawer))
          in div (created by ForwardRef(Drawer))
          in ForwardRef(Drawer) (created by WithStyles(ForwardRef(Drawer)))
          in WithStyles(ForwardRef(Drawer)) (at DrawerComponent.js:13)
          in DrawerComponent (at OrgIntegrationFacebookDrawer.js:33)
          in OrgIntegrationFacebookDrawer (at OrgIntegrationFacebookDrawer.test.js:39)
          in DrawerProvider (at OrgIntegrationFacebookDrawer.test.js:38)

To reproduce:
The pertinent part of the code is here:

const DrawerLayout = ({ children, ...otherProps }) => (
  <div css={styles} {...otherProps} data-testid="drawer-layout">
    {children}
  </div>
);

Expected behavior:
I would expect that the CSS prop shouldn't throw an Unknown Prop warning: https://reactjs.org/warnings/unknown-prop.html

Environment information:

• react version: 16.9.0
• react-dom version: 16.9.0
• emotion-core version: 10.0.27
• emotion version: 10.0.27
• jest version 23.6.0,
• jest-emotion version 10.0.7a

[Andarist]

Most likely you have forgotten to use jsx pragma (/** @jsx jsx /*)

[kaseymccurdy]

I thought this wasn't necessary when using the emotion/babel-preset-css-prop Babel config?

[Andarist]

In that case - yes, it shouldnt be needed. For some reason though it hasnt transformed your css prop. You would have to share a runnable repro case so I could take a look at your setup

[Andarist]

Closing this because a runnable repro case has not been provided so far.

[ngmiduc]

I am getting the same error.
on my side there is maybe something when passing theme => css'' into css props.

I did a quick CRA with the error when running npm t

The test passes but an error is throwing.

https://github.com/ngmiduc/react-jest-emotion-error

[Andarist]

@ngmiduc I'm afraid that you have configured something wrongly with the regards to react-app-rewired. Those are options passed to the babel-jest:

{
  cwd: '/Users/mateuszburzynski/Desktop/react-jest-emotion-error',
  filename: '/Users/mateuszburzynski/Desktop/react-jest-emotion-error/src/App.js',
  options: {
    presets: [
      '/Users/mateuszburzynski/Desktop/react-jest-emotion-error/node_modules/babel-preset-react-app/index.js',
      '/Users/mateuszburzynski/Desktop/react-jest-emotion-error/node_modules/babel-preset-jest/index.js'
    ],
    plugins: [],
    babelrc: true,
    caller: { name: 'babel-jest', supportsStaticESM: false },
    compact: false,
    sourceMaps: 'both'
  }
}

and as you may notice @emotion/babel-preset-css-prop is not anywhere here.

[ngmiduc]

Oh yes, I see.
react-app-rewired doesnt pick up the babel configuration for jest testing environment.
Thanks good to know.

[ngmiduc]

How can you get the babel config that is passed to the jest env ?

[Andarist]

I have no idea how to do this when using react-app-rewired as I'm not familiar with that tool.

[michaelahercogova]

@ngmiduc did you get lucky with this? I am having the same issue using create react app with craco. I have created custom barbelrc.test.js passing it to ts-jest in my craco.config.js and it seems to be picked up as my verbose: true option is being applied correctly however the custom babelrc.test.js does not seem to work for some reason

my craco.config.js jest overwrites

jest: {
      configure: {
        globals: {
          'ts-jest': {
            babelConfig: '<rootDir>/babelrc.test.js'
          }
        },
        verbose: true,
      }
    },

my babelrc.test.js living in the root of my app (there was more but either way it does not seem to do anything)

module.exports = {
  presets: [
    [
      '@emotion/babel-preset-css-prop',
      {
        sourceMap: false,
      },
    ],
  ]
};

@Andarist how can I see what is being past to the plugin? I use CRA which makes the custom config all a bit too elaborate.

I will be super grateful for any help.

Many thanks! 🙏🏻

[ngmiduc]

Sorry, no - I hadn't time to look at it further.
Somehow I need to inject the babel plugin into the jest environment, but I don't know how exactly.

[michaelahercogova]

I actually managed to get it recognised by jest when running jest --coverage at least as when doing so react is not complaining about "globals" presence in package.json however now I am getting this error instead

      You have illegal escape sequence in your template literal, most likely inside content's property value.
      Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\00d7';" should become "content: '\\00d7';".
      You can read more about this here:
      https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences

Ideas how to fix that?

[Andarist]

Inspect the stack trace that leads to this error and you should be able to see which style leads to this. How to fix the problem is mentioned in this message - unless you are suffering from some different problem and used heuristics are not 100% accurate.

[michaelahercogova]

@Andarist So the problem actually is with my custom component library that I build and plugin to my project where when I then run Jest it complains. It's not a problem when running or building the consuming application, it's only a problem when trying to test it. I managed to get Jest to use my .babelrc.json with following settings

{
    "presets": [
        "@babel/preset-react",
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": "current"
                }
            }
        ],
        "@babel/preset-typescript",
        "@emotion/babel-preset-css-prop"
    ],
    "plugins":["@emotion"]
  }

I still have those two errors (in Jest only) - when I import a component from my built library it gives me the 'string literal error' and when I use emotion css prop on in the consuming application I get the 'invalid prop error'.

I do have the latest babel-css-prop plugin (11.2.0)

[Andarist]

Well, this is really not a lot of information to debug this properly.

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[muuuuminn]

My project has worked well with the following setup.

// jest.config.js
module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  // Add more setup options before each test is run
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    // Use babel-jest to transpile tests with the next/babel preset
    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    '^.+\\.(js|jsx|ts|tsx)$': [
      'babel-jest',
      {
        presets: [
          [
            'next/babel',
            {
              'preset-react': {
                runtime: 'automatic',
                importSource: '@emotion/react',
              },
            },
          ],
        ],
        plugins: ['@emotion/babel-plugin'],
      },
    ],
  },
  transformIgnorePatterns: [
    '/node_modules/',
    '^.+\\.module\\.(css|sass|scss)$',
  ],
};

Environment information:

"@emotion/react": "^11.10.4",
"jest": "^29.2.2",
"next": "^12.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@babel/core": "^7.19.3",
"@emotion/babel-plugin": "^11.10.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"babel-loader": "^8.2.5",
"jest-environment-jsdom": "^29.2.2",
"typescript": "^4.8.4"