reactjs - 为什么我的 Jest 测试在使用 Typescript 的 React Native 中失败？

Question

我已经使用 typescript 在 native react 中设置了一个非常非常简单的组件。我的目标只是设置 Jest 并通过一个简单的测试。这是 App.tsx 的代码:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

和测试:

import React from 'react';
import App from '../App';

import { create } from "react-test-renderer";

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

“Hello World”按预期呈现，但当我运行测试时，我得到:

  console.error
    Warning: React.createElement: type is invalid -- expected a string (for built-in componen
ts) or a class/function (for composite components) but got: object.

事实上，当我检查导出函数“App 的类型”时，它是一个 React.Element 而不是一个组件。但这是为什么呢？它返回一个元素，但我认为这就是组件应该做的事情。导出本身是一个无状态函数，所以我有点困惑......

更新:添加了 Dennis Tsoi

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

到 package.json 中的“jest”对象并修复了打字错误。看来 expo 客户端并没有创建在 React Native 中运行 tpyescript 所需的一切

Answer 1

编辑:

通过查看远程存储库， https://github.com/adamglang/rnTranslatedBible

该错误与 package.json 中缺少 jest 配置有关。

<小时/>

注意:

• Github pull request

<小时/>

解决方案:

package.json

  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ]
  },

<小时/>

根据 Jest 文档，默认配置是:

Default: ["js", "json", "jsx", "ts", "tsx", "node"]

通过改变顺序，将 "ts" 和 "tsx" 移到 js 前面，问题就得到了解决。

<小时/>

建议使用react-native-testing-library，因为react-test-renderer可能会对react native产生一些问题；

注意:需要 react-native-testing-library作为 devDependency。

评论:

• 一些RN开发人员使用react-native-testing-library作为测试其组件的简单方法；以及允许方法基于深度嵌套的组件树快速断言值。

为什么 React-native-testing-library 解决了:

You want to write maintainable tests for your React Native components without testing implementation details, but then you're told to use Enzyme, which you learn has no React Native adapter, meaning only shallow rendering is supported. And you want to render deep! But deep rendering may otherwise require jsdom (React Native isn't the web!), while doing deep rendering with react-test-renderer is so painful.

示例

应用程序.tsx

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

测试.ts

import React from "react";
import { render } from "react-native-testing-library";
import App from "../App";

describe("App", () => {

  it("App", async () => {
    const component = render(<App />);
    expect(component.toJSON()).toMatchSnapshot();
  });
});

编辑[附加快照]

exports[`App App 1`] = `
<View
  style={
    Object {
      "alignItems": "center",
      "backgroundColor": "#fff",
      "flex": 1,
      "justifyContent": "center",
    }
  }
>
  <Text>
    Hello World!
  </Text>
</View>
`;