Expo Support for the experimental syntax 'jsx' isn't currently enabled

Question

Similar to Syntax Error: Support for the experimental syntax 'jsx' isn't currently enabled but specifically for Expo and JSX files. I am trying to follow https://docs.expo.io/guides/testing-with-jest/

I have an App.js which imports MainStackNavigator.jsx using

import MainStackNavigator from './app/navigation/MainStackNavigator';

Here's the failing test. Note that I actually commented out all execution of the test, I am just trying to load App

import React from 'react';
import renderer from 'react-test-renderer';

import App from './App';

describe('<App />', () => {
  it('has 1 child', () => {
    // const tree = renderer.create(<App />).toJSON();
    // expect(tree.children.length).toBe(1);
  });
});

My tests that test files that contain no JSX work.

.babelrc

{
  "presets": ["babel-preset-expo"],
  "plugins": [
    ["dotenv-import", {
      "moduleName": "@env",
      "path": ".env",
      "blacklist": null,
      "whitelist": null,
      "safe": false,
      "allowUndefined": false
    }],
    "@babel/plugin-syntax-jsx"
  ]
}

Relevant lines in package.json

  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ]
  },

  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-syntax-jsx": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "babel-preset-expo": "^8.2.3",
    "babel-preset-jest": "^26.6.2",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^2.5.1",
    "expo-cli": "^3.26.2",
    "jest-expo": "^40.0.1",

I'm getting this

I've tried adding transform modules and others. About the only thing I haven't tried is to rename all my JSX files to JS.

Answer 1

Have you checked that your webpack.config.js file contains the rules for transpiling jsx?

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  },