在 react native + typescript 应用程序上运行 jest 时出错（Jest 遇到了意外的令牌）答案

【问题标题】：Error when running jest on a react native + typescript app (Jest encountered an unexpected token)在 react native + typescript 应用程序上运行 jest 时出错（Jest 遇到了意外的令牌）
【发布时间】：2019-10-12 06:52:05
【问题描述】：

似乎每个人和他们的母亲都遇到了这个问题。我从所有 SO 问题和 GH 票证中尝试的一切都没有奏效。

实际上应该很简单，因为我的项目几乎是一个新的准系统项目。但是我仍然无法弄清楚我的生活出了什么问题。

当我运行jest:

/Desktop/Dropbox/Programming/iphone-app/fe/App.spec.tsx:11
    const tree = react_test_renderer_1.default.create(<App_1.default />).toJSON();
                                                      ^

SyntaxError: Unexpected token <

我的配置文件：

// jest.config.js

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

// tsconfig.json

{
    "compilerOptions": {
        "allowJs": false,
        "allowSyntheticDefaultImports": true,
        "noFallthroughCasesInSwitch": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "isolatedModules": true,
        "jsx": "react-native",
        "lib": [
            "es6"
        ],
        "moduleResolution": "node",
        "noEmit": true,
        "strict": true,
        "target": "esnext"
    },
    "exclude": [
        "node_modules"
    ]
}

// babel.config.js

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
    };
};

编辑#1

为了清楚起见，我尝试在 jest 配置文件中使用 react-native 预设，但没有成功（同样的错误）：

// jest.config.js

module.exports = {
    preset: 'react-native',
    transform: {
        '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
        '^.+\\.tsx?$': 'ts-jest'
    },
    globals: {
        'ts-jest': {
            tsConfig: 'tsconfig.json'
        }
    },
    testEnvironment: 'node',
};

【问题讨论】：

标签： reactjs typescript react-native jestjs babeljs

【解决方案1】：

我认为，问题是打开和关闭。您可以尝试如下编辑您的代码吗？

import 'react-native'
import renderer from 'react-test-renderer'
import { App } from './app'
import React from 'react'

test('renders correctly', () => {
  const tree = renderer.create(
    <App />
  )
  expect(tree).toBeDefined()
})

【讨论】：

【解决方案2】：

它适用于这个配置文件：

const { defaults } = require('jest-config');

module.exports = {
    preset: 'react-native',
    transform: {
        '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
        '^.+\\.tsx?$': 'ts-jest'
    },
    moduleFileExtensions: [
        'tsx',
        ...defaults.moduleFileExtensions
    ],
};

我需要添加

...
moduleFileExtensions: [
    'tsx',
    ...defaults.moduleFileExtensions
],
...

否则我测试中的import App from './App'; 将解析为其他文件。通过在moduleFileExtensions 选项中添加tsx 作为最高优先级，应用程序会解析正确的文件。

还需要将tsconfig.json 中的jsx 编译器选项设置为"jsx": "react"。我不确定为什么我还不能将其设置为 react-native，但现在一切似乎都正常。

编辑

'^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js' 在较新版本的react-native 中不需要。 Keeping it may also cause a problem.

【讨论】：

尝试此解决方案后问题仍然存在