Unexpected token, expected "{"

Question

I am trying to set up jest to test my react code. but i am running into the above error, at the < for state in below line

class app extends Component <State> {

this is my .babelrc file

{
"presets": [
    "@babel/preset-env",
    "@babel/preset-react"
]
}

need help desperately. to be more clear this is my fake.spec.js. in the import statement i am facing a unexpected token import.

import React from 'react';

import app from '../src/app.react.js';

describe('App Snapshot', () => {
  test('renders', () => {
    const component = renderer.create(
      <app />
    );
    let tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });
});

this is my package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "@material-ui/core": "^1.5.0",
    "axios": "^0.18.0",
    "babel-preset-react": "^6.24.1",
    "chart.js": "^2.7.2",
    "jest": "^24.1.0",
    "js-cookie": "^2.2.0",
    "material-icons": "^0.2.3",
    "qrcode.react": "^0.9.2",
    "react": "^16.4.2",
    "react-chartjs-2": "^2.7.4",
    "react-dom": "^16.4.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^1.1.4",
    "universal-cookie": "^3.0.4",
    "unix-timestamp": "^0.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "flow-bin": "^0.78.0"
  }
}

this is my file what i am trying to test app.react.js

import React, {Component} from 'react';
import 'themes/material/material.css';
import {graphql} from 'lib/graphql'


class app extends Component <State> {
  state = {
    app_config: {
      name: null,
      logo_image: null,
    };
...

Do add the error as well and perhaps more data on the class where things get stuck. Otherwise it hard to help. Also telling what things you tried will help. — rhand, Mar 02 '19 at 01:41

score 0 · Answer 1 · answered Mar 01 '19 at 23:06

0

Your code looks like TypeScript, so add @babel/preset-typescript to presets in .babelrc.
Oh, and you won't need preset-env then.

answered Mar 01 '19 at 23:06

P Varga

19,174
12
70
108

Do you have a `tsconfig.json`? – P Varga Mar 01 '19 at 23:31
`{ "compilerOptions": { "outDir": "./src/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react" }, "include": [ "./src/**/*" ] }` yea this is my tsconfig . – Prashant singh Mar 01 '19 at 23:46
`import` is valid in TypeScript. Could you post the code where it gives that syntax error? – P Varga Mar 01 '19 at 23:50

Unexpected token, expected "{"

1 Answers1