Rendering a React component in Jest returns null

Question

I'm having hard time writing test unit with Jest :/ Here is my code:

import { NewRec } from '../src/components/edit';
import { shallow } from 'enzyme';
import React from 'react/lib/ReactWithAddons';

jest.mock('react-dom');
jest.mock('react/lib/ReactDefaultInjection');

describe('NewRec component', () => {
    const component = shallow(<NewRec />);
    it('returns true if blah blah', ()=>{
         const p = component.find('errortitle');
         expect(p.length).toEqual(1)
    });
});

P is always 0. I tried to check how the component looks like after rendering. Asked the question here: (How to see what the rendered React component looks like in the Jest unit test?) The snapshot file says it's null:

 exports[`NewRec component returns true if blah blah 1`] = `null`;

So why it's always null? What is the problem in the code? The "NewRec" component is using mixins (mixins: [React.addons.LinkedStateMixin]). Can that cause the problem?

UPDATE: Here is the component code:

export const NewRec = React.createClass({
    mixins: [React.addons.LinkedStateMixin],

    getInitialState() {
        return {
            group_id: null,
            title: "",
            errors: {},
        }
    },

    createRec(event) {
        event.preventDefault();
        if (!this.state.title.length) {
            this.setError('title', "Please add a title");
            return;
        }
        if (!this.state.group_id) {
            this.setError('group', "Please select a group");
            return;
        }
        serverCache.createRec(
            { group: this.state.group_id, title: this.state.title },
            rec => { browser.gotoRec(rec.id); }
        );
    },

    selectgroup(group_id) {
        this.setState({group_id: group_id});
    },

    rendergroupList(groups) {
        return (
                <div > { groups.map(this.rendergroup) } </div>
        );
    },

    onTitleChange(event) {
        this.setState({title:event.target.value});
    },

    componentWillMount() {
        const user = serverCache.getUser();
        if (!user || !user.get('name')) {
            notifications.warning('Please login first.');
        }
    },

    render() {
        const user = serverCache.getUser();
        const groups = serverCache.getgroups();

        return (
            <div className="row">
                <form className="form-horizontal" onSubmit={this.createRec}>
                    <label htmlFor="title" className="col-sm-3 control-label"> Title </label>
                    <div>
                        <input type="text"  id='title' value={this.state.title} onChange={this.onTitleChange} />
                    </div>
                    <div> 
                        <label htmlFor="group" className="col-sm-3 control-label" >group </label>
                    </div>
                    <div> 
                        {this.state.errors.title ? <div id='errortitle' >{this.state.errors.title} </div>: false }
                        {this.state.errors.group ? <div id='errorgroup' >{this.state.errors.group} </div> : false }
                        <div > 
                            <button type="submit" className="btn btn-primary btn-default btn-block"> Create Rec</button>
                        </div>
                    </div>
                </form>
            </div>
        );
    }
});

can you post your component code, or at least the render method of the component. You should also note that `shallow` does not trigger any of the lifecycle methods of your component. — Andreas Köberle, Nov 09 '16 at 15:19
Looks strange, maybe you should start debugging in with adding `console.log` to the render method to check that they is called. And remove the 2 `jest.mock` statements as they are not necessary and maybe have some strange side effects. — Andreas Köberle, Nov 10 '16 at 08:21

score 0 · Answer 1 · answered Nov 13 '16 at 15:11

0

I think component.find('new-rec').length is 0 because there is no new-rec component, tag, or whatever you're looking for, I mean, wehen I see this code const p = component.find('new-rec'); I understand that you are trying to get a p tag with a new-rec class or something like that, But if you are looking for a class, then you have to do const p = component.find('.new-rec'); Note de dot before de word (css selector). But again it will be 0 because I don't see any p tag with a .new-rec class in the NewRec component.

answered Nov 13 '16 at 15:11

Pedro Jimenez

126
6

Good catch Pedro. It was from my previous try :-P Just updated the code. So what I'm trying to do is to find the `
` that has the `id='errortitle'` . Is it possible? Can `component.find()` look for the tag with its id or it only can look for the css class?
– Birish Nov 14 '16 at 11:35
@Sarah, yes, you can find by whatever **CSS selector** you want, look at the docs https://github.com/airbnb/enzyme/blob/master/docs/api/ReactWrapper/find.md In your case I think you can do `const p = component.find('#errortitle');` Let me know if it works for you :) – Pedro Jimenez Nov 15 '16 at 12:50
no it didn't help :( The thing is this component seems to be empty: `component = shallow();`. It doesn't render the `NewRec`. When I try to use `mount` instead of `shallow` I get this error: `TypeError: Cannot read property monitorScrollValue of null`. Or if I try to use `render` instead of `shallow` it will complain about `componentWillMount` that is used in `NewRec ` definition. Is there any other way to render a component to test it?! – Birish Nov 17 '16 at 10:16

Rendering a React component in Jest returns null

1 Answers1