Почему мой шутный тест не проходит в React native с машинописью? - PullRequest
Новая
       58

Почему мой шутный тест не проходит в React native с машинописью?

5 голосов
/ 28 апреля 2020

Я установил действительно, очень простой компонент в реагировать нативно с использованием машинописи. Моя цель - просто настроить 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.

И действительно, когда я проверяю экспортированную функцию 'Тип приложения, это React.Element, а не компонент. Но почему это так? Он возвращает элемент, но я подумал, что именно этот компонент должен был делать. Сам экспорт является функцией без сохранения состояния, поэтому я немного запутался ...

ОБНОВЛЕНИЕ: Деннис Цой добавил 

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

к объекту 'jest' в пакете. json и это исправил опечатку. Кажется, клиент expo не создает все необходимое для запуска tpyescript в реагировать на нативные

Ответы [ 2 ]

1 голос
/ 07 мая 2020

Редактировать:

При просмотре удаленного репозитория, https://github.com/adamglang/rnTranslatedBible

Ошибка связана с отсутствующей конфигурацией jest в пакете. json.

Примечание:

Решение:

пакет. json

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

В соответствии с документами Jest стандартная конфигурация: 

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

Изменяя порядок, в результате чего "ts" и "tsx" перенесены в js, проблема решена.

Предложите ответную-нативную-тестирующую библиотеку, так как у реагирующего-тест-рендерера могут быть некоторые проблемы с реагирующим нативом;

Примечание : требуется act-native-testing-library в качестве devDependancy.

Комментарий:

  • someRN developer use response-native-testing-library как простой способ тестирования их компонентов; а также позволяя методам быстро утверждать значения на основе глубоко вложенного дерева компонентов.

Почему React-native-testing-library разрешает:

Вы хотите писать поддерживаемые тестирует компоненты React Native без проверки деталей реализации, но затем вам говорят, что нужно использовать Enzyme, который, как вы узнаете, не имеет адаптера React Native, что означает, что поддерживается только поверхностный рендеринг. И вы хотите сделать глубоко! Но в противном случае для глубокого рендеринга может потребоваться jsdom (React Native - это не веб!), В то время как глубокий рендеринг с помощью рендеринга-теста-рендеринга очень болезненный.

Пример

Приложение. 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();
  });
});

Редактировать [Добавить снимок] 

exports[`App App 1`] = `
<View
  style={
    Object {
      "alignItems": "center",
      "backgroundColor": "#fff",
      "flex": 1,
      "justifyContent": "center",
    }
  }
>
  <Text>
    Hello World!
  </Text>
</View>
`;
0 голосов
/ 01 мая 2020

Вот решение, которое я получил, работая. Я создал еще один компонент реакции, чтобы отобразить компонент приложения. 

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

import  renderer from "react-test-renderer";

function AppMirror(){
    return (
        <App />
    )
}

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

Однако я не могу понять основную причину, по которой он не видит его как компонент реакции. Если вы поймете это, пожалуйста, дайте мне знать в комментариях, и я могу отредактировать свой ответ.

Вот связанный GitHub Проблема .

...