时间戳

首页 > 解决方案 > 用酶检查呈现的文本

react-native - 用酶检查呈现的文本

问题描述

我正在使用 react-native，我想测试一些功能。

我想检查何时向组件插入一些文本，例如：“barak walk”。

  1. 它变为“BARAK WALK”。
  2. 当它太长时，将其与“BARAK WALK ...”进行比较。

我不知道如何用酶检查它（我准备这次不要使用快照）

代码：

export default ({ text }: Props): JSX.Element => {
  return (
    <View style={styles.box}>
        <Text numberOfLines={1} style={cardText}>
          {text}
        </Text>
      </View>
  );
};

const styles = StyleSheet.create({
  box: {
    height: 160,
    width: 160,
  },
  cardText: {
    color: Colors().ALWAYS_WHITE,
    textAlign: 'center',
    fontSize: 12,
    fontFamily: AleckFonts.SANS_MEDIUM,
    letterSpacing: 0.4,
    lineHeight: 15,
    padding: 6,
    paddingLeft: 20,
    paddingRight: 20,
    textTransform: 'uppercase',
  },
});

我试过这个，但它没有呈现文本：

test('Should check if text shown as expected', () => {
  const receivedText = 'barak walk';
  const expectedText = 'BARAK WALK';
  const wrapper = shallow(<Card text={receivedText} />);
  const textView = wrapper.find(Text).children();
  expect(textView.text()).toBe(expectedText);
});

标签： react-nativejestjsenzyme

解决方案

几件事要尝试：

(1)Don't use children at all

  const textView = wrapper.find(Text);  // <----take out children prop
  expect(textView.text()).to.equal(expectedText);

此外，因为您使用 CSS 更改文本的大小写，它仍将呈现为小写。

示例 - barak walk呈现为barak walk但由于 css 样式，它以全部大写形式显示给您。

因此，在您的断言中，如果像这样编写原始测试，它应该通过：

  const textView = wrapper.find(Text); // <--- try
  expect(textView.text()).toBe(receivedText); //<---- receivedText is gona be lowercase

这是因为receivedText将全部小写。

...当字符串太长时在末尾添加

function handleLongString(str, desiredLength){
   return str.length > desiredLength ? str.slice(0,desiredLength) + "..." : str;
}

然后你可以在你的代码中使用它，如下所示：


<Text>{ handleLongString(text) }</Text>

推荐阅读