在浅渲染功能组件上调用 instance() 会返回 null答案

【问题标题】：Calling instance() on shallow rendered functional component returns null在浅渲染功能组件上调用 instance() 会返回 null
【发布时间】：2019-05-16 09:47:38
【问题描述】：

我有以下 React 功能组件，它接受名称作为道具

const Name = ({ name }) => <h1>{name}</h1>;

Name.propTypes = {
    name: PropTypes.string.isRequired
}

而我的测试如下

describe("<Name />", () => {
    it("accepts name as a prop", () => {
        const wrapper = shallow(<Name name="Monkey D Luffy"/>);
        expect(wrapper.instance().props.name).toBe("Monkey D Luffy");
    })
})

这会返回以下错误

TypeError: 无法读取 null 的属性“props”

更新

我如下调用Name组件

class Person extends React.Component {
  state = {name: "Name here"}
  render () {
     return  <div><Name name={this.state.name} /></div>
  }
}

我发现在无状态组件上调用 instance() 不适用于 react 16。* 在我的情况下，我不能使用 wrapper.prop()，因为它只返回根节点的道具

为什么在渲染组件上调用实例函数时返回null，如何测试传递给无状态组件的props？

原始问题

为什么在渲染组件上调用实例函数时返回null

【问题讨论】：

您提到的组件结构如何，您不能使用 wrapper.prop()？

标签： javascript reactjs jestjs enzyme

【解决方案1】：

instance() === null 用于功能组件，因为功能组件没有实例。

应该使用 Enzyme 自己的 API 来访问组件 props：

expect(wrapper.prop('children')).toBe("Monkey D Luffy");

正如the reference 解释的那样，

要返回整个 React 组件的 props，请使用 wrapper.instance().props。这对 React 15 中的有状态或无状态组件有效。。但是，对于 React 16 中的无状态 React 组件，wrapper.instance() 将返回 null。，因此 wrapper.instance().props 在这种情况下会导致错误。

【讨论】：

谢谢 :) 。我刚刚发现这不适用于 react 16.*。它曾经与 React 15 一起工作。*
是的，刚刚将这部分添加到答案中。
但我不能使用prop()。 prop 不会返回名称 prop，因为它只返回组件呈现的根节点上的 props 值，而不是组件本身。
我明白你的意思。这是 Enzyme 的明显局限性，因为它呈现根节点。如果需要，可以用 div 将其包装起来，shallow(<div><Name ... /></div> 和 wrapper.find(Name).props()。为什么要以任何方式断言自己在测试中编写的代码？
那么你就在正确的轨道上。您不需要断言name="Monkey D Luffy"，因为这是您自己在上面一行编写的代码，您可以非常确定它没问题。这就是为什么 Enzyme 甚至不允许检查包装器自己的道具的原因，这只是不需要的。您可以通过断言wrapper.prop('children') === 'Monkey D Luffy'（基本上就是它的作用）或wrapper.html() === '<h1>Monkey D Luffy</h1>' 来断言组件的工作方式。