fix: React inlinesSnapshots and corruption in jest --coverage

.github/workflows/ci.yml

@@ -1,6 +1,6 @@
 name: esbuild-jest
 
-on: [push]
+on: [push, pull_request]
 
 jobs:
   ubuntu-latest:
@@ -19,6 +19,7 @@ jobs:
     - run: yarn
     - run: yarn build
     - run: yarn test
+    - run: yarn test:coverage
       env:
         CI: true
   windows-latest:
@@ -37,6 +38,7 @@ jobs:
     - run: yarn
     - run: yarn build
     - run: yarn test
+    - run: yarn test:coverage
       env:
         CI: true
   macos-latest:
@@ -55,5 +57,6 @@ jobs:
     - run: yarn
     - run: yarn build
     - run: yarn test
+    - run: yarn test:coverage
       env:
         CI: true

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 .envrc
-default.nix
+default.nix
+coverage

examples/react-ts/App.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
 
-export default function App() {
+const App: React.FC<any> = () => {
   return <div>hello world!</div>
-}
+}
+
+export default App

package.json

@@ -8,7 +8,8 @@
   "scripts": {
     "postinstall": "yarn build",
     "build": "ts-node ./tools/build.ts",
-    "test": "jest --clearCache && jest --detectOpenHandles"
+    "test": "jest --clearCache && jest --detectOpenHandles",
+    "test:coverage": "jest --clearCache && jest --coverage"
   },
   "repository": {
     "type": "git",
@@ -30,27 +31,28 @@
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.13.0",
-    "@swc/core": "^1.2.50",
-    "@types/jest": "^26.0.21",
+    "@swc/core": "^1.2.55",
+    "@types/jest": "^26.0.23",
     "@types/mock-fs": "^4.13.0",
-    "@types/node": "^14.14.35",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
+    "@types/node": "^15.0.2",
+    "@types/react": "^17.0.5",
+    "@types/react-dom": "^17.0.3",
     "alias-hq": "^5.1.6",
     "aria-build": "^0.7.3",
     "aria-fs": "^0.7.3",
     "esbuild": "^0.8.49",
     "jest": "^26.6.3",
     "jest-config": "^26.6.3",
     "prettier": "^2.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "tslib": "^2.1.0",
-    "typescript": "^4.2.3"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "tslib": "^2.2.0",
+    "typescript": "^4.2.4"
   },
   "dependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/plugin-transform-modules-commonjs": "^7.13.8",
+    "@babel/core": "^7.14.0",
+    "@babel/preset-env": "^7.14.1",
+    "@babel/preset-react": "^7.13.13",
     "babel-jest": "^26.6.3"
   },
   "babel": {

src/index.ts

@@ -1,36 +1,37 @@
 import { extname } from 'path'
-
-import { Config } from '@jest/types'
-import { TransformOptions as JestTransformOptions, Transformer } from '@jest/transform'
 import { Format, Loader, TransformOptions, transformSync } from 'esbuild'
 
-import { Options } from './options'
+import type { TransformOptions as JestTransformOptions, Transformer } from '@jest/transform'
+import type { Config } from '@jest/types'
+import type { Options } from './options'
+
 import { getExt, loaders } from './utils'
 
 const createTransformer = (options?: Options) => ({
-  process(content: string, 
-    filename: string, 
-    config: Config.ProjectConfig, 
+  process(content: string,
+    filename: string,
+    config: Config.ProjectConfig,
     opts?: JestTransformOptions
   ) {
     const sources = { code: content }
     const ext = getExt(filename), extName = extname(filename).slice(1)
 
-    const enableSourcemaps = options?.sourcemap || false
-    const loader = (options?.loaders && options?.loaders[ext] 
+    // Caution: disabling this, can cause issues with inlineSnapshots since can't find the original line
+    const enableSourcemaps = options?.sourcemap === false ? false : (options?.sourcemap || true)
+    const loader = (options?.loaders && options?.loaders[ext]
       ? options.loaders[ext]
       : loaders.includes(extName) ? extName: 'text'
     ) as Loader
-    const sourcemaps: Partial<TransformOptions> = enableSourcemaps 
-      ? { sourcemap: true, sourcesContent: false, sourcefile: filename } 
+    const sourcemaps: Partial<TransformOptions> = enableSourcemaps
+      ? { sourcemap: true, sourcesContent: false, sourcefile: filename }
       : {}
 
-    /// this logic or code from 
+    /// this logic or code from
     /// https://github.com/threepointone/esjest-transform/blob/main/src/index.js
     /// this will support the jest.mock
     /// https://github.com/aelbore/esbuild-jest/issues/12
     /// TODO: transform the jest.mock to a function using babel traverse/parse then hoist it
-    if (sources.code.indexOf("ock(") >= 0 || opts?.instrument) {
+    if (sources.code.indexOf("jest.mock(") >= 0) {
       const source = require('./transformer').babelTransform({
         sourceText: content,
         sourcePath: filename,
@@ -48,21 +49,21 @@ const createTransformer = (options?: Options) => ({
       ...(options?.jsxFragment ? { jsxFragment: options.jsxFragment }: {}),
       ...sourcemaps
     })
-  
+
     let { map, code } = result;
     if (enableSourcemaps) {
       map = {
         ...JSON.parse(result.map),
         sourcesContent: null,
       }
-  
+
       // Append the inline sourcemap manually to ensure the "sourcesContent"
       // is null. Otherwise, breakpoints won't pause within the actual source.
       code = code + '\n//# sourceMappingURL=data:application/json;base64,' + Buffer.from(JSON.stringify(map)).toString('base64')
     } else {
       map = null
     }
-  
+
     return { code, map }
   }
 })

src/options.ts

@@ -1,4 +1,4 @@
-import { Loader } from 'esbuild'
+import type { Loader } from 'esbuild'
 
 export interface Options {
   jsxFactory?: string

src/transformer.ts

@@ -1,13 +1,13 @@
-import { TransformOptions } from '@jest/transform'
-import { Config } from '@jest/types'
-
 import babelJest from 'babel-jest'
 
+import type { TransformOptions } from '@jest/transform'
+import type { Config } from '@jest/types'
+
 const { process } = babelJest.createTransformer({
-  plugins: [ "@babel/plugin-transform-modules-commonjs" ],
-  parserOpts: { 
-    plugins: ["jsx", "typescript"],
-  }
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+    "@babel/preset-react"
+  ]
 })
 
 export interface BabelTransformOptions {

src/utils.ts

@@ -1,4 +1,4 @@
-import path from 'path' 
+import path from 'path'
 
 export const loaders = ["js", "jsx", "ts", "tsx", "json"]