如何使用 jest + 酶在 react native 中测试样式化组件中的文本

Question

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

<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) />"

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

Answer 1

根据官方文档

text（）：返回当前呈现树的呈现文本的字符串。如果用于测试组件的实际 HTML 输出是什么，则应对此函数持怀疑态度。如果这是您要测试的内容，请改用酶的渲染函数。

在您的情况下，您应该尝试酶开发人员提供的解决方法 expect(wrapper.find('[name="addNewTitle"]').render().text()).toEqual('Tap here to add a new address')