next.jsjestjsreact-testing-libraryemotion

Error while testing a component in next using emotion/styled with jest and react testing library


I am testing a component that has the following code and uses @emotion/styled:

import styled from "@emotion/styled";

const StyledNavBar = styled.div`
  position: fixed;
  top: 0;
  width: calc(100% + 1rem);
`;

const NavBar = (props) => {};

(Note: I don't provide more code because of privacy concerns)

The error I am facing is: (Jest encountered an unexpected token)

Error when running the test

Some of my dependencies:

{
  "dependencies": {
    "@emotion-icons/material": "^3.14.0",
    "@emotion-icons/material-outlined": "^3.14.0",
    "@emotion-icons/material-rounded": "^3.14.0",
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@next/bundle-analyzer": "^13.4.19",
    "@next/env": "^13.5.6",
    "jest-emotion": "^11.0.0",
    "next": "13.4.12",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@emotion/jest": "^11.11.0",
    "@testing-library/jest-dom": "^6.2.0",
    "@testing-library/react": "^14.1.2",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-styled-components": "^7.2.0"
  }
}

I am using node v20.9.0

Do you know any solution for this error?

I have changed some jest configurations but they didn't work


Solution

  • I solved by adding this to my jest.config.js file:

     transformIgnorePatterns: [
        '/node_modules/(?!@emotion/styled/.*)',
      ],