Jest error with css files

Question

I am trying to get my first Jest Test to pass with React and Typescript.

I am getting the following error:

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.App {
                                                                                         ^

SyntaxError: Unexpected token .

  12 |           <h1 className="App-title">Welcome to React</h1>
  13 |         </header>
> 14 |         <p className="App-intro">
  15 |           To get started, edit <code>src/App.tsx</code> and save to reload.
  16 |         </p>
  17 |       </div>

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
  at Object.<anonymous> (src/App.tsx:14:1)
  at Object.<anonymous> (src/App.test.tsx:5:13)

My package.json config for jest look like this:

          {
        "name": "test-react",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
          "@types/react-redux": "^6.0.2",
          "react": "^16.4.1",
          "react-dom": "^16.4.1",
          "react-redux": "^5.0.7",
          "react-scripts-ts": "2.16.0",
          "redux": "^4.0.0"
        },
        "scripts": {
          "start": "react-scripts-ts start",
          "build": "react-scripts-ts build",
          "test": "react-scripts-ts test --env=jsdom",
          "eject": "react-scripts-ts eject",
          "precommit": "lint-staged"
        },
        "lint-staged": {
          "*.tsx": [
            "tslint --fix",
            "git add"
          ]
        },
        "test": "jest",
        "devDependencies": {
          "@types/enzyme": "^3.1.10",
          "@types/jest": "^23.1.0",
          "@types/node": "^10.3.3",
          "@types/react": "^16.3.18",
          "@types/react-dom": "^16.0.6",
          "enzyme": "^3.3.0",
          "eslint-plugin-react": "^7.9.1",
          "husky": "^0.14.3",
          "lint-staged": "^7.2.0",
          "react-addons-test-utils": "^15.6.2",
          "typescript": "^2.9.2"
        }
      }

My jest.config.js look like this:

   module.exports = {
    "roots": [
        "./src"
    ],
    "transform": {
        "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
    "moduleNameMapper": {
        "^.+\\.scss$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
        "ts",
        "tsx",
        "js",
        "json"
    ]
}

I run tests with npx jest and got this error.

Jest: ^23.1.0

React: ^16.3.18

I've tried many solutions from stackoverflow and none of them helped me, I hope for your help

Javid Asgarov · Accepted Answer · 2018-06-19 08:41:27Z

1

Try this, I think I had this issue and solved it with this:

 "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./client/__tests__/__mocks__/fileMock.js",
      "\\.(css|less)$": "./client/__tests__/__mocks__/styleMock.js"
    }
  },

Also look at this issue.

answered Jun 19, 2018 at 8:41

Javid Asgarov

1,5321 gold badge18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jest error with css files

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related