Breakpoints & sourcemaps do not work with a react native setup in Webstorm

• Issue

When running a react native configuration, it is impossible for me to get any breakpoints to register in Webstorm. Debugger statements work but do not break at the correct line.

I have a suspicion that the sourcemaps are to blame. This is an example of it breaking before the debugger statement:

However when I remove the typescript interface it breaks like this:

My thoughts are, that it is using an es6 sourcemap, and not the typescript sourcemaps. My tsconfig is set to enable inline sourcemaps, and looks like this:

{
    "compilerOptions": {
        "jsx": "react",
        "allowSyntheticDefaultImports": true,
        "target": "es2015",
        "moduleResolution": "node",
        "inlineSourceMap": true
    },
    "exclude": [
        "node_modules"
    ]
}

and jest config looks like this:

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

I do not know if this is a webstorm or jest regression, or whether the react native build setup has anything to do with it.

• Expected behavior

I expect to be able to set breakpoints, and that the debugger statements stop at the correct place.

• Link to a minimal repo that reproduces this issue

This is a minimal repo that reproduces the issue. Simply go to the some-test.test.tsx, and in webstorm left click on the test and click debug. https://github.com/GeeWee/rn-typescript-example/tree/ts-loader-bug

I’m not sure how to set up any test cases for this particular bug.

[GeeWee]

Yes that makes perfect sense! Because babel-jest ( at least with the react native preset ) creates synthetic default exports that typescript can grab.

It seems like the problem here would be that if the ts files are passed to babel-jest, the sourcemaps are not included.

I have set sourceMaps: "inline" in my .babelrc and it seems to allow me to set breakpoints and not fail my tests. I’ve updated my repo - can you see if it works for you?

I would be willing to do a PR explaining a more detailed react-native setup guide. (e.g. someone should really mention it pipes it through babel-jest if you use allowSyntheticDefaultImports - I spent quite a bit of time on a preprocessor that would do essentially the same thing)

[GeeWee]

I have created #212 for the VSCode issue.