Expo 目前未启用对实验性语法“jsx”的支持答案

【问题标题】：Expo Support for the experimental syntax 'jsx' isn't currently enabledExpo 目前未启用对实验性语法“jsx”的支持
【发布时间】：2021-04-11 11:13:56
【问题描述】：

类似于Syntax Error: Support for the experimental syntax 'jsx' isn't currently enabled，但专门用于 Expo 和 JSX 文件。我正在尝试关注https://docs.expo.io/guides/testing-with-jest/

我有一个 App.js 使用导入 MainStackNavigator.jsx

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

这是失败的测试。请注意，我实际上注释掉了测试的所有执行，我只是想加载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);
  });
});

我测试不包含 JSX 的文件的测试工作。

.babelrc

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

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",

我收到了

我尝试添加转换模块和其他模块。关于我唯一没有尝试过的是将所有 JSX 文件重命名为 JS。

【问题讨论】：

标签： javascript testing jestjs expo jsx

【解决方案1】：

您是否检查过您的 webpack.config.js 文件是否包含转译 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',
  },

【讨论】：