Fix code-coverage reports for ts/tsx

packages/react-scripts/config/jest/typescriptTransform.js

@@ -26,9 +26,24 @@ if (fs.existsSync(tsconfigPath)) {
 }
 
 module.exports = {
-  process(src, path) {
+  process(src, path, config, options) {
     if (path.endsWith('.ts') || path.endsWith('.tsx')) {
-      return tsc.transpile(src, compilerConfig, path, []);
+      let compilerOptions = compilerConfig;
+      if (options.instrument) {
+        // inline source with source map for remapping coverage
+        compilerOptions = Object.assign({}, compilerConfig);
+        delete compilerOptions.sourceMap;
+        compilerOptions.inlineSourceMap = true;
+        compilerOptions.inlineSources = true;
+        // fix broken paths in coverage report if `.outDir` is set
+        delete compilerOptions.outDir;
+      }
+
+      const tsTranspiled = tsc.transpileModule(src, {
+        compilerOptions: compilerOptions,
+        fileName: path,
+      });
+      return tsTranspiled.outputText;
     }
     return src;
   },

packages/react-scripts/scripts/utils/createJestConfig.js

@@ -23,6 +23,7 @@ module.exports = (resolve, rootDir) => {
   // TODO: I don't know if it's safe or not to just use / as path separator
   // in Jest configs. We need help from somebody with Windows to determine this.
   const config = {
+    mapCoverage: true,
     collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
     setupFiles: [resolve('config/polyfills.js')],
     setupTestFrameworkScriptFile: setupTestsFile,