React Jest: How to get the state of checkbox

Question

I'm trying to find the checked status of a checkbox in a React component. This is my component:

class Checkboxes extends React.Component {
     constructor() {
        super();
        console.log('Hello world!');
        this.state = {
            filterEnabled: {
                'desserts': true,
                'juices': true,
                'meats': true,
                'veggies': true,
            },
            isApplyingFilter: false
        };
    }

    getInitialState () {
        return {
            filterEnabled: {
                'desserts': true,
                'juices': true,
                'meats': true,
                'veggies': true
            },
            isApplyingFilter: false
        };
    }

    render () {
        const { isApplyingFilter } = this.props;
        return (
            <div>
                <div className="row">
                    <div className="col-md-12">
                        <div className="mt-checkbox-inline">
                            <label className="mt-checkbox">
                                <input type="checkbox" name="desserts" value="desserts" 
                                    checked={this.state.filterEnabled.desserts}
                                /> 
                                <span>desserts</span>
                            </label>
                            <label className="mt-checkbox">
                                <input type="checkbox" name="juices" value="juices" 
                                    checked={this.state.filterEnabled.juices}
                                /> 
                                <span>juices</span>
                            </label>
                            <label className="mt-checkbox">
                                <input type="checkbox" name="meats" value="meats" 
                                    checked={this.state.filterEnabled.meats}
                                /> 
                                <span>meats</span>
                            </label>
                            <label className="mt-checkbox">
                                <input type="checkbox" name="veggies" value="veggies" 
                                    checked={this.state.filterEnabled.veggies}
                                /> 
                                <span>veggies</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

I wrote the following test scenario:

it('Applying "foods" filter will display only selected food items.', () => {
    // Locate the checkboxes div 
    var checkboxes = TestUtils.scryRenderedDOMComponentsWithTag(DOM, 'input');
    // Pick the first checkbox
    var cb = checkboxes[0].attributes;
    // prints out "desserts"
    console.log('name: ', cb['name'].value);
    // prints out an empty string
    console.log('checked: ', cb['checked'].value);
});

When I attempt to get the value for cb['checked'], it simply prints out an empty string ''. I'm expecting to get true instead.

What is the correct way to get the state of the checkbox?

score 0 · Answer 1 · answered Jul 11 '16 at 14:23

0

Since you set checked to be equal to this.state.filterEnabled, it would be enough to just check the state.

expect(this.state.filterEnabled.desserts).toBe(true);

answered Jul 11 '16 at 14:23

TheAmateurProgrammer

9,252
8
52
71

That gives me an error: `TypeError: Cannot read property 'state' of undefined`. I tried `expect(DOM.state.filterEnabled.desserts)` as well, but that didn't work either. – Dirty Penguin Jul 11 '16 at 14:34
What does `console.log(DOM.state)` print out? – TheAmateurProgrammer Jul 11 '16 at 14:37
1

I get: `Object { isApplyingFilter: false }`. Strange it only shows one of the items in `state`. – Dirty Penguin Jul 11 '16 at 14:46
It looks like `DOM.state` is actually printing out whatever is in `this.props`, ie, the const declaration right after the `render` method. How might I access the actual `this.state` of this component? – Dirty Penguin Jul 11 '16 at 14:56
It looks like your constructor isn't getting called? Try put a `console.log` inside. Also set your default state in `getInitialState` instead and see if that works. – TheAmateurProgrammer Jul 11 '16 at 15:32
I've updated the code example as suggested. I see the `Hello world!` output, but I still do not see the actual `this.state` when looking at the `DOM` object with `console.dir(DOM)`. – Dirty Penguin Jul 11 '16 at 15:47

React Jest: How to get the state of checkbox

1 Answers1