测试react本机组件时，TypeScript与流冲突

我有一个简单的react本机样板，我正在尝试测试一个使用typescript编写的简单react本机组件：

// Splash.tsx
import React, { Component } from 'react';
import { SContainer, STitle, SSubtitle, SPara } from './Splash.style';

export default class Splash extends Component {
  render() {
    return (
      <SContainer>
        <STitle>Clean Slate</STitle>
        <SSubtitle>A react-native boilerplate</SSubtitle>
        <SPara>
          with TypeScript, React-Navigation, {'\n'}styled-components, Redux and
          Sagas
        </SPara>
      </SContainer>
    );
  }
}

我还有其他纯JS/TS函数的jest测试（没有JSX），测试可以完美地运行和通过。 但是当我在Splash.spec.tsx上运行

jest--u

时，我得到了以下结果：

src/screens/Splash/Splash.spec.tsx失败
● 测试套件无法运行
类型脚本诊断（使用`[jest config].globals.ts jest.diagnostics`选项自定义）：
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:18:1-错误TS8002:'import…='只能在.ts文件中使用。
18进口类型{
~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:41:13-错误TS8008:“类型别名”只能在.ts文件中使用。
41导出类型ViewStyleProp=\uuuuuuuuuu ViewStyleProp\u Internal；
~~~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:51:13-错误TS8008:“类型别名”只能在.ts文件中使用。
51导出类型TextStyleProp=\uuuuuuuuuuuuuTextStyleProp\uInternal；
~~~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:61:13-错误TS8008:“类型别名”只能在.ts文件中使用。
61导出类型ImageStyleProp=\uuuuuuuuuu ImageStyleProp\uInternal；
~~~~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:70:13-错误TS8008:“类型别名”只能在.ts文件中使用。
70导出类型危险不精确StyleProp=\uuuuuuuu危险不精确StyleProp\u内部；
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:88:13-错误TS8008:“类型别名”只能在.ts文件中使用。
88导出类型TypeForStyleKey<
~~~~~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:90:18-错误TS8011:“类型参数”只能在.ts文件中使用。
90>=$ElementType；
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:107:13-错误TS8008:“类型别名”只能在.ts文件中使用。
107导出类型ViewStyle=\uuuuuuuuuu ViewStyle\u Internal；
~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:124:13-错误TS8008:“类型别名”只能在.ts文件中使用。
124导出类型TextStyle=\uuuuuuuu TextStyle\u内部；
~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:141:13-错误TS8008:“类型别名”只能在.ts文件中使用。
141导出类型ImageStyle=\uuuuuuuuuu ImageStyle\uInternal；
~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:155:13-错误TS8008:“类型别名”只能在.ts文件中使用。
155导出类型危险不精确样式=\uuuuuuu危险不精确样式\u内部；
~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:162:13-错误TS8008:“类型别名”只能在.ts文件中使用。
162导出类型LayoutStyle=\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuu LayoutStyle\uInternal；
~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:163:13-错误TS8008:“类型别名”只能在.ts文件中使用。
163导出类型ShadowStyle=\uuuuuuuuuuuuuuuuuuu ShadowStyle\uInternal；
~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:164:13-错误TS8008:“类型别名”只能在.ts文件中使用。
164导出类型TransformStyle=\uuuuuuuuuu TransformStyle\uInternal；
~~~~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:171:21-错误TS8010:“类型”只能在.ts文件中使用。
171常量绝对填充：布局样式={
~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:253:32-错误TS8010:“类型”只能在.ts文件中使用。
253 absoluteFill:（absoluteFill:any），//TODO:这应该在我们修复下游流量站点后更新。
~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:275:11-错误TS8004:“类型参数声明”只能在.ts文件中使用。
275作曲(
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:276:13-错误TS8010:“类型”只能在.ts文件中使用。
276样式1:T，
~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:277:13-错误TS8010:“类型”只能在.ts文件中使用。
277样式2:T，
~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:278:6-错误TS8010:“类型”只能在.ts文件中使用。
278）：？T |$ReadOnlyArray{
~~~~~~~~~~~~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:280:48-错误TS8011:“类型参数”只能在.ts文件中使用。
280返回（[style1，style2]：$ReadOnlyArray）；
~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:337:15-错误TS8010:“类型”只能在.ts文件中使用。
337属性：字符串，
~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:338:14-错误TS8010:'types'只能在.ts文件中使用。
338进程：（下一步：混合）=>混合，
~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:361:10-错误TS8004:“类型参数声明”只能在.ts文件中使用。
361创建（obj:S）：$ObjMap any>{
node_modules/react native/Libraries/StyleSheet/StyleSheet.js:18:13-错误TS1005:“=”应为。
18进口类型{
// Splash.spec.tsx
import React from 'react';
import Splash from './Splash';
import renderer from 'react-test-renderer';

test('renders correctly', () => {
  const tree = renderer.create(<Splash onAppStart={() => {}} />).toJSON();
  expect(tree).toMatchSnapshot();
});

  "jest": {
    "preset": "react-native",
    "verbose": true,
    "clearMocks": true,
    "collectCoverage": true,
    "globals": {
      "__DEV__": true
    },
    "transform": {
      "^.+\\.(t|j)sx?$": "ts-jest"
    },
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "testMatch": [
      "**/**/*.(test|spec).(tsx|ts|js)"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|jest-styled-components|styled-components)/)"
    ],
    "testEnvironment": "node"
  }

{
  "compilerOptions": {
    "target": "es2016",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "outDir": "artifacts",
    "rootDir": "src",
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "preserveConstEnums": true,
    "allowJs": true,
    "pretty": true,
    "sourceMap": true,
    "noImplicitReturns": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "importHelpers": true,
    "paths": {
      "*": ["src/*"]
    }
  },
  "include": ["./src/**/*"],
  "filesGlob": ["typings/index.d.ts", "src/**/*.ts", "src/**/*.tsx"],
  "types": ["react", "react-native", "jest"],
  "exclude": ["android", "ios", "build", "node_modules", "**/*.js"],
  "compileOnSave": false,
  "lib": ["dom", "es7"]
}