为什么我的玩笑测试在带有打字稿的 React Native 中失败? [英] Why is my jest test failing in React native with typescript?

问题描述

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

从'react'导入React；import { StyleSheet, Text, View } from 'react-native';导出默认函数 App() {返回 (<视图样式={styles.container}><Text>Hello World!</Text></查看>);}const 样式 = StyleSheet.create({容器: {弹性:1，背景颜色:'#fff'，alignItems: '中心',justifyContent: '中心',},});

和测试:

从'react'导入React；从'../App'导入应用程序；import { create } from "react-test-renderer";test('正确渲染', () => {const tree = create();期望(tree.toJSON()).toMatchSnapshot();});

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

 console.error警告:React.createElement:类型无效——需要一个字符串(对于内置组件ts) 或类/函数(用于复合组件)但得到: object.

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

更新:Dennis Tsoi 添加了

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

到 package.json 中的 'jest' 对象并修复了打字错误.似乎 expo 客户端没有创建在 react native 中运行 tpyescript 所需的一切

解决方案

从远程仓库来看，https://github.com/adamglang/rnTranslatedBible

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

<小时>

注意:

• Github 拉取请求

<小时>

解决方案:

package.json

 "jest": {预设":反应原生"，模块文件扩展名":["ts","tsx",js"]},

<小时>

根据笑话文档，默认配置为:

默认:["js", "json", "jsx", "ts", "tsx", "node"]

通过改变顺序，将 "ts" 和 "tsx" 移到 js 前面，问题就解决了.><小时>

建议使用 react-native-testing-library，因为 react-test-renderer 可能会遇到 react native 的一些问题；

注意:需要 react-native-testing-library 作为 devDependancy.

评论:

• someRN 开发人员使用 react-native-testing-library 作为测试其组件的简单方法；以及允许方法根据深度嵌套的组件树快速断言值.

为什么 React-native-testing-library 可以解决:

<块引用>

你想为你的 React Native 组件编写可维护的测试而不测试实现细节，但是你被告知使用 Enzyme，你了解到它没有 React Native 适配器，这意味着只支持浅层渲染.而你想要渲染得更深！但是深度渲染可能需要 jsdom(React Native 不是网络！)，而使用 react-test-renderer 进行深度渲染非常痛苦.

示例

App.tsx

从'react'导入React；import { StyleSheet, Text, View } from 'react-native';导出默认函数 App() {返回 (<视图样式={styles.container}><Text>Hello World!</Text></查看>);}const 样式 = StyleSheet.create({容器: {弹性:1，背景颜色:'#fff'，alignItems: '中心',justifyContent: '中心',},});

test.ts

从react"导入React；从react-native-testing-library"导入{渲染}；从../App"导入应用程序；描述(应用程序"，()=> {它(应用程序"，异步()=> {const component = render();期望(component.toJSON()).toMatchSnapshot();});});

编辑[附加快照]

exports[`App App 1`] = `<查看风格={目的 {"alignItems": "中心","backgroundColor": "#fff",弹性":1，"justifyContent": "中心",}}><文字>你好，世界！</文本></查看>`;

I have set up a really, really simple component in react native using typescript. My goal is just to get Jest set up and a simple test to pass. Here is the code for 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',
  },
});

and the test:

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' renders as expected but when I run the test I get:

  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.

And indeed when I check the exported function 'App's type it is a React.Element not a component. But why is that? It is returning an element but I thought thats what a component was supposed to do. The export itself is a stateless function so I am a bit confused...

UPDATE: Dennis Tsoi added

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

to the 'jest' object in package.json and that fixed the typerror. It seems expo client does not create everything needed to run tpyescript in react native

解决方案

Edit:

From looking at the remote repository, https://github.com/adamglang/rnTranslatedBible

The error was related a missing jest configuration in the package.json.

---

Note:

• Github pull request

---

Solution:

package.json

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

---

According to the jest docs, the default configuration is:

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

By altering the order, whereby "ts" and "tsx" are moved infront of js, the issue is resolved.

---

Suggest react-native-testing-library as react-test-renderer can have some issues with react native;

Note: requires react-native-testing-library as a devDependancy.

Commentary:

• someRN developer use react-native-testing-library as a simple way to test their components; as well as allowing methods to quickly assert values based on a deeply nested component tree.

Why React-native-testing-library resolves:

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.

Example

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',
  },
});

test.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();
  });
});

Edit [Attach snapshot]

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

这篇关于为什么我的玩笑测试在带有打字稿的 React Native 中失败?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！