如何使用 jest + 酶测试样式组件内的文本以反应本机答案

【问题标题】：How to test the text inside a styled component in react native using jest + enzyme如何使用 jest + 酶测试样式组件内的文本以反应本机
【发布时间】：2019-01-04 05:06:22
【问题描述】：

我有一个使用样式组件设置样式的自定义文本组件。

<P compact name="addNewTitle" small helper>
                      {addNew
                        ? 'Fill in the address details'
                        : 'Tap here to add a new address'}
                    </P>

我想测试该组件内的文本，我已经编写了这个测试

test('for the title if add new prop is false', () => {
     wrapper = shallow(<Address {...props} />)
     const value = wrapper.find('[name="addNewTitle"]')
     expect(value.length).toBe(1)
     expect(value.text())).toEqual('Tap here to add a new address')
    })

但是测试会抛出这样的错误

 expect(received).toEqual(expected)

    Expected value to equal:
      "Tap here to add a new address"
    Received:
      "<Styled(_default) />"

我该如何克服这个问题以及我的代码有什么问题。谢谢

【问题讨论】：

标签： javascript react-native jestjs enzyme

【解决方案1】：

根据official documentation

text()：返回当前渲染树的渲染文本字符串。如果用于测试组件的实际 HTML 输出将是什么，则应以怀疑的态度看待此函数。如果这是您想要测试的，请改用酶的渲染功能。

在您的情况下，您应该尝试workaround as given by Enzyme's developer expect(wrapper.find('[name="addNewTitle"]').render().text()).toEqual('Tap here to add a new address')

【讨论】：