Ts-jest: JSX: Unexpected token

[mkozhukharenko]

hi!

I'm using example of 'jest' configuration from readme.md and this simple test

const renderer = require('react-test-renderer')

it('renders correctly', () => {
  const tree = renderer.create(<div>hi!</div>).toJSON()
  expect(tree).toMatchSnapshot()
})

gives the next Error:

   var tree = renderer.create(<div>hi!</div>).toJSON();
                                   ^
    SyntaxError: Unexpected token <

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:285:10)
      at process._tickCallback (internal/process/next_tick.js:103:7)

Any ideas? I'd be grateful.

[kulshekhar]

Have you imported React in the file containing this code?

[mkozhukharenko]

@kulshekhar I tried that that didn't help.

[kulshekhar]

I've been unable to reproduce this issue. Can you create a small repo on Github which demonstrates this issue? It'll be very helpful to find the cause of this

[mkozhukharenko]

found a problem. It's in a ts-jest preprocessors config:

To make it work globals should be:

"globals": {
      "__TS_CONFIG__": {
        "module": 1,
        "jsx": 2
      }
    }

1 correspons to commonjs and 2 - to react. Its because tsc.ModuleKind.CommonJS return 1 (number) and tsc.JsxEmit.React - 2 (number).

so, we should update Readme or getTSConfig function`.

[mkozhukharenko]

Proof: module kinds list in the typescript source code)
script kind can be found below.

[kulshekhar]

I'm not sure this is the reason as the existing settings work fine for me. Would it be possible for you to create a minimal repo that demonstrates this issue?

[mkozhukharenko]

ok, I'll create.
Which version of ts are you using?
can you console log config object and post an output here?

[kulshekhar]

I'm using the latest RC version but I've also tested it with the latest stable version.

{"module":"commonjs","jsx":"react"}

[kulshekhar]

@mkozhukharenko you're right about the source of the problem. I'll add a fix and tests for this!

[kulshekhar]

@mkozhukharenko I've pushed a fix and have updated the npm package.

With these changes, I was able to successfully run npm test -- -u on the repo you shared, with one slight modification - I had to rename Button.test.ts to Button.test.ts. This is required by Typescript.

Let me know if you have any more issues with this.

Thanks for opening an issue and for creating a sample repo to help reproduce this issue!

[mkozhukharenko]

@kulshekhar you are welcome! thanks for fixing.

offtopic:
what is this line require('ts-jest').install({environment: 'node', emptyCacheBetweenOperations: true}) for? I tried to remote it and it works as well.

[kulshekhar]

That is used by the part of the preprocessor that takes care of displaying the correct line numbers in the typescript files. If you remove this, any failed tests you see will show you the line numbers in the compiled JS file.

[ghost]

This problem still persists with typescript.
can be found at https://github.com/con-ssc/XrmPage-Mock/tree/con-ssc/TypeScript
my package.json

{
  "dependencies": {
    "@types/jest": "^16.0.0",
    "@types/xrm": "^8.0.35",
    "jest": "^17.0.3",
    "ts-jest": "^17.0.0",
    "typescript": "^2.0.10",
    "yarn": "^0.17.9"
  },
  "jest": {
    "transform": {
      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ]
  }
}

 FAIL  XrmPage\__tests__\XrmPageTest.test.ts
  ● Test suite failed to run

    D:\repositories\git\XrmPage-Mock\XrmPage\__tests__\XrmPageTest.test.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { XrmMock } from "./../XrmMock";
                                                                                              ^^^^^^
    SyntaxError: Unexpected token import

      at transformAndBuildScript (node_modules\jest-runtime\build\transform.js:316:10)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.861s
Ran all test suites.

[Igmat]

@con-ssc could you please provide us with your node version and tsconfig?

[ghost]

node -v: v7.0.0
tsconfig:

{
    "compilerOptions": {
        "target": "es5",
        "experimentalDecorators": true
    }
}

[Igmat]

I've cloned your repro. First error that I get after npm install and npm test (I've added "scripts": {"test": "jest --no-cache" }) is about missing tsconfig.json - you haven't it in project and there is no globals.__TS_CONFIG__ in package.json - I've added second one and get errors about Xrm (it's not defined) - you have typings for it, but haven't add it as dependency.
But first problem you've told about is unreproducible for me.

[ghost]

Well there is no package for npm since it is MS Dynamics 365. The goal of the repo is to mock the framework for unit or intergration testing.
If you run node_modules.binjest.cmd in the root folder you should get the error
Okay i executed it now with from scripts and that works, so why does it not if I execute it directly?

[kulshekhar]

@con-ssc it would be very helpful if you could create a minimal sample repo which exhibits the behavior you're experiencing

[Igmat]

I've executed node_modules\.bin\jest.cmd from root folder and haven't faced JSX: Unexpected token error.
It could be a problem with node_modules folder itself (there could be some garbage). Try to clear it and npm install all packages again.

[stephenotalora]

was there any resolution about this? I'm getting a similar error where I get a Syntax error while trying to use jsx within my tests 😭