emotion: Invalid value for prop `css` on
tag when running Jest

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 6
Comments: 16 (7 by maintainers)

Most upvoted comments

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"

muuuuminn on Oct 31, 2022

emotion: Invalid value for prop `css` on tag when running Jest

About this issue

Most upvoted comments

emotion: Invalid value for prop `css` on
tag when running Jest