在浅浅呈现的功能组件上调用instance（）返回null

Question

我有以下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”

更新资料

我正在按如下方式调用名称组件

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

我发现调用instance()无状态组件将无法与react 16一起使用。* wrapper.prop()在我的情况下无法使用，因为它仅返回根节点的道具

为什么在渲染的组件上调用实例函数时它返回null，以及如何测试传递到无状态组件中的道具？

原始问题

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

Answer 1

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

应使用酶本身的API来访问组件道具：

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

如参考资料所述，

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