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)
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
I solved by adding this to my jest.config.js
file:
transformIgnorePatterns: [
'/node_modules/(?!@emotion/styled/.*)',
],