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

按照official documentation

text（）：返回当前渲染树的渲染文本的字符串。如果此功能用于测试组件的实际HTML输出是什么，则应对此表示怀疑。如果那是您要测试的内容，请改为使用酶的render函数。

对于您来说，您应该尝试使用workaround as given by Enzyme's developer expect(wrapper.find('[name="addNewTitle"]').render().text()).toEqual('Tap here to add a new address')

如何使用Jest +酶在本机反应中测试样式化组件内部的文本

1 个答案: