为什么我无法使用酶检测按钮元素？

Question

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.

Answer 1

Your adapter config doesn't seem to be correct.

Try:

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

instead of:

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

Answer 2

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

Answer 3

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 .