Ts-jest: Getting unexpedted token for jsx. [Question], [Help].

[aminroosta]

With the following ...

// __tests___/index.tsx
import {Text} from 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';

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

// package.json
    "jest": {
      "preset": "react-native",
      "moduleDirectories": [ "node_modules", "<rootDir>" ],
      "transform": {
        ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
      },
      "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
      "moduleFileExtensions": [ "ts", "tsx", "js", "json" ]
    }

I get this :/

        3 | import renderer from 'react-test-renderer';
        4 | it('renders correctly', () => {
      > 5 |     const tree = renderer.create(<Text />).toJSON();
          |                                  ^
        6 |     expect(tree).toMatchSnapshot();
        7 | });

[aminroosta]

Changing "jsx": "react-native" to just "jsx": "react" in my tsconfig.json fixed the issue.

something like

// tsconfig-for-jest.json
{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "jsx": "react",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true
  }
}

And ...

// package.json

"jest": {
  "globals": {
    "ts-jest": {
      "tsConfigFile": "tsconfig-for-jest.json"
    }
  },
  "preset": "react-native",
  "transform": {
    "^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest",
    "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json"
  ]
}

[houyidg]

why need rewrite "jsx": "react-native", to "jsx": "react"? can explain?