Search code examples
jestjsenzymenext.js

Jest didn't parse to import a file

I am trying to test my Next.js project with Jest and Enzyme. When I try to import a file from my components to test it, throws error though. Here's my files...

In the package.json my jest configuration are:

 "jest": {
"setupFilesAfterEnv": "<rootDir>/jest.setup.js",
"testPathIgnorePatterns": [
  "<rootDir>/.next/",
  "<rootDir>/node_modules/"
],
"transform": {
  "\\.(gql|graphql)$": "jest-transform-graphql",
  ".*": "babel-jest",
  "^.+\\.js?$": "babel-jest"
}


 },

  "//": "I prefer this over a .babelrc file",
  "babel": {
    "env": {
      "development": {
        "presets": [
          "next/babel"
        ],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ]
        ]
      },
      "production": {
        "presets": [
          "next/babel"
        ],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ]
        ]
      },
      "test": {
        "presets": [
          [
            "next/babel",
            {
              "preset-env": {
                "modules": "commonjs"
              }
            }
          ]
        ],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ]
        ]
      }
    }
  }

And subsequently in jest.setup.js :

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

However I always encounter this error anytime I want to **import a file **(In here for example I try to import a file namely "import ItemComponent from '../components/Item';"):

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules". SyntaxError: Unexpected identifier

Details:

SyntaxError: C:\Users\Welcome\Desktop\Advanced-React-master\sick-fits\frontend\__tests__\Item.test.js: Unexpected token (20:28)

  18 | describe('<Item/>', () => {
  19 |   it('renders and matches the snapshot', () => {
> 20 |     const wrapper = shallow(<ItemComponent item={fakeItem} />);
     |                             ^
  21 |     expect(wrapper).toMatchSnapshot();
  22 |   });
  23 |   // it('renders and displays properly', () => {

  at Parser.raise (node_modules/@babel/parser/lib/index.js:3939:15)
  at Parser.unexpected (node_modules/@babel/parser/lib/index.js:5248:16)
  at Parser.parseExprAtom (node_modules/@babel/parser/lib/index.js:6328:20)
  at Parser.parseExprSubscripts (node_modules/@babel/parser/lib/index.js:5924:21)
  at Parser.parseMaybeUnary (node_modules/@babel/parser/lib/index.js:5903:21)
  at Parser.parseExprOps (node_modules/@babel/parser/lib/index.js:5812:21)
  at Parser.parseMaybeConditional (node_modules/@babel/parser/lib/index.js:5784:21)
  at Parser.parseMaybeAssign (node_modules/@babel/parser/lib/index.js:5731:21)
  at Parser.parseExprListItem (node_modules/@babel/parser/lib/index.js:6995:18)
  at Parser.parseCallExpressionArguments (node_modules/@babel/parser/lib/index.js:6124:22)

Any help would be appreciated

Solution

  • Try removing these two lines from your package.json:

      ".*": "babel-jest",
  "^.+\\.js?$": "babel-jest"

    In theory, these shouldn't be needed: https://jestjs.io/docs/en/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object

    The custom configuration you have added might be causing issues. In theory, jest should transform your js files by default using babel-jest. I've certainly had a recent NextJS project work with jest with no babel-jest config declared in my package.json.