Jest encountered an unexpected token because trying to import a file which Jest cannot parse

0
votes

PS E:\react\Code\UI> yarn test yarn run v1.17.3 $ jest FAIL src/App.test.js ● Test suite failed to run

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

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

E:\react\Code\UI\src\mainpage.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){body{font-size:12px;font-family:arial,sans-serif;background-size:200% 100%!important;height:100vh}
                                                                                             ^

SyntaxError: Unexpected token {

  1 | import React, { Component } from "react";
> 2 | import "../mainpage.css";
    | ^
  3 | import { connect } from "react-redux";
  4 | import propTypes from "prop-types";
  5 | import { fetchPost } from "../redux/action/postaction";

  at ScriptTransformer._transformAndBuildScript (E:\react../../../../Code/UI/node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
  at ScriptTransformer.transform (E:\react../../../../Code/UI/node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
  at Object.<anonymous> (E:\react../../../../Code/UI/src/page/Header.js:2:1)

Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 3.592s Ran all test suites. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

1
reactjstestingreact-reduxjestjsenzyme

1 Answers

1
votes

mock your css files

Jest has no idea what to do with css files. You need handle them in your jest config. There's really good info here.

But essentially you need to add something like this to your jest config

// package.json (for CSS Modules)
{
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    }
  }
}