javascript - Calling instance() on shallow rendered functional component returns null - Stack Overflow

admin管理员组

文章数量:1289845

I have following React functional ponent which accepts name as a prop

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

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

And my test is as follows

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");
    })
})

This returns following error

TypeError: Cannot read property 'props' of null

Update

I am calling the Name ponent as follows

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

I found out that calling instance() on a stateless ponent not gonna work with react 16.* I can not use wrapper.prop() in my case as it only returns the props of the root node

Why does it return null when calling instance function on the rendered ponent and how do I test props passed into a stateless ponent?

Original Question

Why does it return null when calling instance function on the rendered ponent

I have following React functional ponent which accepts name as a prop

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

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

And my test is as follows

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");
    })
})

This returns following error

TypeError: Cannot read property 'props' of null

Update

I am calling the Name ponent as follows

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

I found out that calling instance() on a stateless ponent not gonna work with react 16.* I can not use wrapper.prop() in my case as it only returns the props of the root node

Why does it return null when calling instance function on the rendered ponent and how do I test props passed into a stateless ponent?

Original Question

Why does it return null when calling instance function on the rendered ponent

• javascript
• reactjs
• jestjs
• enzyme

Share Improve this question Follow edited Dec 17, 2018 at 15:16 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked Dec 15, 2018 at 9:59 It worked yesterday.It worked yesterday. 4,6271111 gold badges5050 silver badges8484 bronze badges 1

• 1 how's your ponent structured as you mentioned you can't use wrapper.prop()? – Amit Chauhan Commented Dec 15, 2018 at 10:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

instance() === null for functional ponent because functional ponents don't have instances.

Enzyme's own API should be used to access ponent props:

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

As the reference explains,

To return the props for the entire React ponent, use wrapper.instance().props. This is valid for stateful or stateless ponents in React 15.. But, wrapper.instance() will return null for stateless React ponent in React 16., so wrapper.instance().props will cause an error in this case.

本文标签： javascriptCalling instance() on shallow rendered functional component returns nullStack Overflow