[Bug]: wrong react native setup documentation

matheusgoc commented 2 years ago

Version

^27.1.4

Steps to reproduce

See page https://kulshekhar.github.io/ts-jest/docs/guides/react-native#jest-config

Expected behavior

The Jest Config placed at https://kulshekhar.github.io/ts-jest/docs/guides/react-native#jest-config seems to be wrong because tsjPreset has no use. I suppose it would extend the configuration as pointed out on this post Typescript React Native with Jest

Actual behavior

tsjPreset has no use at the documentation code. Consider either take it out or update to a better solution.

const { defaults: tsjPreset } = require('ts-jest/presets')

module.exports = {
  preset: 'react-native',
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.spec.json',
    },
  },
  transform: {
    '^.+\\.jsx$': 'babel-jest',
    '^.+\\.tsx?$': 'ts-jest',
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
}

Debug log

just documentation to be updated

Additional context

Based on the documentation, I still don't know how to properly set up ts-jest to be used with react native. I'm actually trying to use it with react native testing library but did not get any real solution for it facing a bunch of issues on the way. I've post this a question (https://stackoverflow.com/questions/71800362/react-native-testing-library-with-typescript-does-not-work) at stack overflow about the problem I'm facing with it, but clearly the documentations lacks on react native set up. I appreciate for any help!

Environment

System:
    OS: macOS 12.0.1
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.17 - ~/.yarn/bin/yarn
    npm: 8.1.3 - ~/.nvm/versions/node/v14.18.1/bin/npm
  npmPackages:
    jest: ^27.5.1 => 27.5.1

also, follow my dependencies for reference:

{
  "name": "connect",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "debug": "open 'rndebugger://set-debugger-loc?host=localhost&port=8081' && react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "pod": "npx pod-install",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@airbrake/browser": "^2.1.7",
    "@react-navigation/bottom-tabs": "^6.2.0",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.5.1",
    "@reduxjs/toolkit": "^1.8.0",
    "@rneui/base": "^4.0.0-rc.1",
    "@rneui/themed": "^4.0.0-rc.1",
    "@types/react": "^17",
    "@types/react-native-dotenv": "^0.2.0",
    "@types/react-redux": "^7.1.23",
    "axios": "^0.26.1",
    "formik": "^2.2.9",
    "http-status": "^1.5.0",
    "moment": "^2.29.2",
    "react": "17.0.2",
    "react-native": "0.67.4",
    "react-native-blob-util": "^0.13.8",
    "react-native-dotenv": "^3.3.1",
    "react-native-dropdownalert": "^4.5.1",
    "react-native-error-boundary": "^1.1.12",
    "react-native-loading-spinner-overlay": "^2.0.0",
    "react-native-safe-area-context": "^4.2.2",
    "react-native-screens": "^3.13.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-vector-icons": "^9.1.0",
    "react-redux": "^7.2.6",
    "redux-persist": "^6.0.0",
    "redux-persist-filesystem-storage": "^4.0.0",
    "use-debounce": "^7.0.1",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.16.11",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^3.0.1",
    "@testing-library/jest-native": "^4.0.4",
    "@testing-library/react-native": "^9.1.0",
    "@types/jest": "^27.4.1",
    "@types/react-native": "^0.66.15",
    "@types/react-native-loading-spinner-overlay": "^0.5.3",
    "@types/react-test-renderer": "^17.0.1",
    "babel-jest": "^27.5.1",
    "eslint": "7.32.0",
    "jest": "^27.5.1",
    "metro-react-native-babel-preset": "^0.70.1",
    "react-addons-test-utils": "^15.6.2",
    "react-native-typescript-transformer": "^1.2.13",
    "react-test-renderer": "18.0.0",
    "ts-jest": "^27.1.4",
    "typescript": "^4.4.4"
  },
  "resolutions": {
    "@types/react": "^17"
  }
}

ahnpnl commented 2 years ago

I have an example here https://github.com/ahnpnl/react-native-ts-jest-example

It’s old one but working at that time

MiguelNiblock commented 2 years ago

@ahnpnl Just did some experiments with the working example integrated with react native. It works on v 26 for jest and ts-jest. v27 of both libraries failed on the same test. Also, it's strange that in tsconfig.spec.json, the value for "jsx" must be "react", whereas in the regular tsconfig.json it is "react-native". Setting the spec file to jsx: "react-native" will also fail the test.

kulshekhar / ts-jest