Question

我正在尝试为非常非常简单的本机组件编写一个简单的快照测试。但是，Jest使用的快照不包含组件单个孩子的任何样式或内容信息。

该组件是本机库中的按钮，其中带有图标。来源：

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，将对此的注释添加到了文档中。

开玩笑的快照测试会忽略子样式

1 个答案: