Invalid value for prop `css` on <div> 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

[yumemi-omi]

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"

[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.