[Jest 24+] [TypeScript] Current React Native preprocessor for Jest does not support TypeScript syntax

[rreina]

🐛 Bug Report

Jest does not run tests written in TypeScript with the preprocessor provided by React Native in
'RNRootFolder/jest/preprocessor.js'

React Native: 0.58.3
Jest: 24.0.0

Jest has introduced support to run unit tests written in TypeScript in version 24.
ts-jest got outdated because of it, i.e. You are not able to use ts-jest anymore with Jest 24.

For a proposed solution, please see below.

To Reproduce

Create a project written in TypeScript using the default babel preset: 'metro-react-native-babel-preset'.

Expected Behavior

Jest should be able to run unit tests written in TypeScript using the provided preprocessor by React Native.

Code Example

Proposed solution. Modify 'preprocessor.js' to transform TypeScript into ECMAScript 6, this is working fine.

 transformer.transform({
 ...

 plugins: [
        **[require("@babel/plugin-transform-typescript")]**
        ...
    ]

)};

Proposed Babel plugin to be added:
https://www.npmjs.com/package/@babel/plugin-transform-typescript

Environment

React Native Environment Info:
System:
OS: macOS 10.14.3
CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Memory: 40.08 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.2 - /usr/local/bin/node
npm: 6.7.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 22, 23, 24, 26, 27, 28
Build Tools: 27.0.3, 28.0.3
System Images: android-19 | Intel x86 Atom, android-19 | Google APIs Intel x86 Atom, android-22 | ARM EABI v7a, android-22 | Intel x86 Atom, android-22 | Intel x86 Atom_64, android-22 | Google APIs ARM EABI v7a, android-22 | Google APIs Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5199772
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.7.0 => 16.7.0
react-native: 0.58.3 => 0.58.3
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-rename: 2.2.2

[donovanhiland]

I'd love to help with this one. Any thoughts or direction other than the proposed solution?

[LinusU]

Hmm, it seems like doesn't use the project babel config (in this case metro-react-native-babel-preset), but has its own list. I wonder if we could require in metro-react-native-babel-preset there, instead of having a lists of plugins, and then call that. That way they would stay in sync.

Otherwise we could probably add typescript support similar as how it's done here: https://github.com/facebook/metro/blob/0e22250d28932716243ec1923db76b9866a5d556/packages/metro-react-native-babel-preset/src/configs/main.js#L172-L183

[AndreiCalazans]

@rreina I tried reproducing this, I didn't have any luck. Here is what I did.

1. react-native init TestJestTs --template typescript
2. yarn test

Here is the reproduction: https://github.com/AndreiCalazans/TestJestTs

@LinusU I think it does use metro-react-native-babel-preset, or at least the the typescript template does. See jest config and dependency

[robhogan]

Closing this as we've used babel-jest for .ts and .tsx for some time (years?) now - please open a new issue if you still have issues with TypeScript and React Native's Jest preset.