React: How mock functions and test component rendering with jest:

Question

Im very new to react/jest. Im trying to test a very simple react component that gets data from the server and renders the response. My component looks like the below:

export default class myComponent extends Component {
    constructor(props) {
        super(props);
    }

     async componentDidMount() {
        try {
            let response = await axios.get(`server/url/endpoint`);
            this._processSuccess(response.data);
        } catch(e) {
            this._processFail(e);
        }
    }

    _processSuccess(response) {
        this.setState({pageTitle: response.data.title, text: response.data.text});
    }

    render() {
        return (
            <div className="title">{this.state.pageTitle}</div>
        );
    }
}

Now I want to test this class. While I test:

I want to make sure componentDidMount() was not called
I want to pass test data to _processSuccess
Finally check the if the rendered output contains a div with class title that has the inner text same as what I supplied as response.data/pageTitle

I tried something like the below:

import React from 'react'
import MyComponent from './MyComponent'
import renderer from 'react-test-renderer'
import { shallow, mount } from 'enzyme'

describe('MyComponent', () => {
    it('should display proper title', () => {
        const c = shallow(<MyComponent />);
        c._processSuccess(
            {data:{pageTitle:'siteName', test:'text'}}
        );
        // couldn't go further as Im getting error from the above line
    });
});

But, Im getting MyComponent._processSuccess is not a function error. What would be the proper way to do that.

lorenzo-s · Accepted Answer · 2017-08-18 14:45:28Z

3

shallow() returns an Enzyme wrapper with some utils method to test the rendered component. It does not return the component instance. That's why you get the error when calling c._processSucces(). To access the component you can use the .instance() method on the wrapper, so the following should work:

    const c = shallow(<MyComponent />);
    c.instance()._processSuccess(
        {data:{pageTitle:'siteName', test:'text'}}
    );

In order to avoid that component's componentDidMount() get called, you can try settings disableLifecycleMethods on the shallow renderer, but I'm not sure about that because here Enzyme's documentation is not 100% clear:

    const c = shallow(<MyComponent />, {
        disableLifecycleMethods: true
    });

Finally, you can check if the output contains the expected <div>, using Enzyme's contains() and one of Jest assertion methods:

    expect(c.contains(<div className="title" />)).toBe(true);

edited Aug 18, 2017 at 14:45

answered Aug 18, 2017 at 6:54

lorenzo-s

17.1k15 gold badges59 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kamrul Khan Over a year ago

Thanks for your reply. yes I can call _processSuccess on the instance(). However, I also need to test the rendered output and see if my call to _processSuccess made any impact on it. if I try something like: expect(c.contains(<div className="title" />)).to.equal(true); afterwards will it work? in my case im getting something like, ` TypeError: Cannot read property 'equal' of undefined`

lorenzo-s Over a year ago

@KamrulKhan Your problem is that you are looking at Enzyme's examples: in the documentation they refer to the chai assertion library, but since you are using Jest, I suggest you to use the built-in one. See my updated answer.

Collectives™ on Stack Overflow

React: How mock functions and test component rendering with jest:

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related