Evil cycle of typescript vs. jsx in Jest

Expo SDK
1

To put it very simply I have 2 errors when trying to run Jest ( with Enzyme) and the app itself.
in babel.config.js
I have

presets: [
      "babel-preset-expo",
 ],

in jest.config.js
I have

preset: "react-native",

and in package.json
I have

  "jest": {
    "preset": "jest-expo",
    "transform": {
      "^.+\\.[jt]s?$": "babel-jest"
    },
    "setupFilesAfterEnv": [
      "<rootDir>/setupTests.js"
    ]
  },

With this setup I can run my app, but when I try to run any test, one of the react-native library files causes an error:

node_modules/react-native/Libraries/Utilities/warnOnce.js:15
    const warnedKeys: {[string]: boolean} = {};
          ^^^^^^^^^^

    SyntaxError: Missing initializer in const declaration

      at Runtime.createScriptFromCode (node_modules/jest/node_modules/jest-runtime/build/index.js:1257:14)
      at Object.<anonymous> (node_modules/react-native/Libraries/react-native/react-native-implementation.js:14:18)

so I try to install @babel/plugin-transform-typescript
and add the plugin to my babel.config.js file

    plugins: [
      "@babel/plugin-transform-typescript",
    ],

which removes the previous error but now none of JSX syntax is understood, and the both the app and the test give errors like Unexpected token: around the <App /> element.

Is there a working example of an Expo app with tests?
It seems like I can’t get past the typescript interpreter error in the react-native library without introducing a JSX interpreter error.

2

fixed.

  1. deleted jest.config.js
  2. keep the above setting in package.json
  3. update babel.config.js file:
    presets: [
      "@babel/preset-typescript",
      "babel-preset-expo",
    ],

and now…

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   2 passed, 2 total
Time:        9.207s
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.