如何获取酶中的根标签名称？

Question

我正在尝试测试其输出取决于属性的组件，即： props.editable == 'true' : 渲染输入否则渲染 div

我已经尝试过：

expect(wrapper.first().type()).toBe('div')

但我得到 [Function: ComponentName]

这是我的代码：

组件文件.js

function ComponentName(props) {
    if (props.editable) return <input />
    else return <div />
}

ComponentFile.test.js

it('should render a div if not editable', () => {
    const wrapper = mount(<ComponentName editable={false} />
    expect(wrapper.first().type()).toBe('div')
})

上述测试失败，因为它得到 [Function: ComponentName] 我也尝试过 wrapper.getElement().type 但它也是一个函数。

我能够通过这样做暂时得到我想要的结果：

expect(wrapper.html().substr(0, 4)).toBe('<div')

但我希望有一种更惯用的方式

编辑： 解决了。 Turns out it works if you use shallow instead of mount.

Answer 1

我认为您只是错过了在那里输入的内容。你应该使用.to.equal 而不是toBe：

expect(wrapper.first().type()).toEqual('div')

参考： https://airbnb.io/enzyme/docs/api/ShallowWrapper/type.html

附： 这仅在您使用shallow 而不是mount 来渲染组件时才有效。不知道为什么...

---

更新：

上面的 Matt cmets 举了一个很好的例子。在此处发布以提高知名度：

https://codesandbox.io/s/function-testing-6sxt5