使用 Typescript 和 Jest 进行本机测试

Question

我正在尝试使用react-native/expo 和 typescript 开始测试。我使用世博会的基本打字稿模板创建了一个应用程序。

为了开始测试，我遵循了博览会有关使用 Jest 进行测试的文档。我已添加jest-expo和作为开发依赖项，并根据文档react-test-renderer更新了：package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    ...
    "test": "jest"
  },
  "dependencies": {
    "expo": "~41.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/jest": "^26.0.23",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "@types/react-test-renderer": "^17.0.1",
    "jest-expo": "^41.0.0",
    "react-test-renderer": "^17.0.2",
    "typescript": "~4.0.0"
  },
  "private": true,
  "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/.*)"
    ]
  }
}

这是测试，App.test.tsx：

import renderer from 'react-test-renderer';
import App from "../App";
import React from "react";

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

在编辑器（Webstorm）中它抛出 2 个错误：

1. tree Object is possibly 'null'.
2. Property 'children' does not exist on type 'ReactTestRendererJSON | ReactTestRendererJSON[]'. Property 'children' does not exist on type 'ReactTestRendererJSON[]'。

而且，当我运行测试时，它会抛出不同的错误<App />

renderer.create(<App />).toJSON()：

元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。

你能帮我看看我在这里缺少什么吗？如何使用 typescript 和 jest 测试 React Native？

Answer 1

似乎 Expo 的 Jest 预设存在错误/问题，因为我发现有一个与该错误相关的开放GitHub 问题。

为了按照 GitHub 的答案解决这个问题，就像 Kipnoedels 指出的那样，我必须在我的笑话配置中添加这个package.json：

"moduleFileExtensions": ["ts", "tsx", "js"]

所以，package.json看起来有点像这样：

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    ...
    "test": "jest"
  },
  "dependencies": {
    ..
  },
  "devDependencies": {
    ...
  },
  "private": true,
  "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/.*)"
    ],
    "moduleFileExtensions": ["ts", "tsx", "js"]
  }
}