CODEWITHSUNDEEP
javascriptreactjsunit-testingdebuggingenzyme
sp92
sp92

Reputation: 987

Why can't I detect the button element using enzyme?

I used npm install --save enzyme react-test-renderer enzyme-adapter-react-16 to start things off. I wrote the code below then ran npm test to get the output I got in Terminal.

What am I doing wrong and how can I fix it?

Here's CheckoutButton.js:

import React from 'react';
import classes from './CheckoutButton.css';

const button = (props) => (
    <button className={classes.Button} id="test" onClick={props.clicked}>Checkout</button>
);

export default button;

Here's CheckoutButton.test.js:

import React from 'react';

import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import CheckoutButton from './CheckoutButton';

configure({
    adapter: ({adapter: new Adapter()})
});

describe('<CheckoutButton />', () => {
    it('should logout upon clicking the button', () => {
        const wrapper = shallow(<CheckoutButton/>);
        expect(wrapper.find("button")).toHaveLength(1);
    });
});

Here's what I get in the Terminal:

Test Suites: 2 failed, 2 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.572s, estimated 3s
Ran all test suites related to changed files.

Upvotes: 0

Views: 59

Answers (3)

Sasha
Sasha

Reputation: 5944

Your adapter config doesn't seem to be correct.

Try:

configure({ adapter: new Adapter() });

instead of: 

configure({
   adapter: ({adapter: new Adapter()})
});

Upvotes: 1

Piyush Maurya
Piyush Maurya

Reputation: 2015

In CheckoutButton.js update your code to:

import React from 'react';
import classes from './CheckoutButton.css';

const CheckoutButton = (props) => (
    <button className={classes.Button} id="test" onClick={props.clicked}>Checkout</button>
);

export default CheckoutButton;

As per React component naming convention, you should always name your component in PascalCase.

Component name should always start from Capital letter. Making this change will pass the test case.

More detail cann be find here: Component Naming Convention.

Upvotes: 0

Eugene Tsakh
Eugene Tsakh

Reputation: 2879

Because it's in your root while you are trying to find it in children. Your expect should be expect(wrapper.type()).toEqual('button');

Upvotes: 0

Related Questions