Тест Jest Snapshot игнорирует стиль ребенка

Question

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

Компонент представляет собой кнопку из native-base со значком внутри. Источник:

import React, { Component } from 'react';

import { Button, Icon } from 'native-base';
export default class AddButton extends Component {
  render() {
    return (
      <Button transparent
            style={{
              alignSelf: "center",
              paddingTop: 0,
              paddingBottom: 0}}>
        <Icon
            style={{fontSize: 36}}
            name="ios-add-circle-outline" />
    </Button>);
  }
}

И вот тест для него:

import React from 'react';
import AddButton from './AddButton.js';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer
    .create(<AddButton/>)
    .toJSON();
  console.log(tree);
  expect(tree).toMatchSnapshot();
});

Снимок выглядит так:

<View
  // ... lots of properties
  style={
    Object {
      // ... lots of styles
    }
  }
>
  // But no info about the Text component below!
  <Text />
</View>

Все, что есть для текстовых компонентов - это скелеты <Text />. Он должен содержать стиль fontSize и иметь иконку с текстом!

Как создать снимок для компонента, который включает в себя весь стиль и текст его дочерних элементов?

Answer 1

Это вызвано логикой рендеринга Expo для иконок.Шрифты значков загружаются в фоновом режиме, и если компонент значков визуализируется до того, как шрифт заканчивает загрузку, компонент отображается как просто <Text />.См. https://github.com/expo/vector-icons/blob/master/createIconSet.js#L39.

Я открыл https://github.com/expo/expo/issues/3566, чтобы получить примечание об этом, добавленное в документацию.