Почему я не могу определить элемент кнопки, используя фермент?

Я использовал npm install --save enzyme react-test-renderer enzyme-adapter-react-16 чтобы начать все. Я написал код ниже, затем npm test чтобы получить вывод, который я получил в Terminal .

Что я делаю неправильно и как я могу это исправить?

Вот 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;

Вот 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);
    });
});

Вот что я получаю в Терминале:

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.

javascript reactjs unit-testing debugging enzyme

Всего 3 ответа

Конфигурация адаптера не кажется правильной.

Пытаться:

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

вместо:

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

Потому что он находится в вашем корне, пока вы пытаетесь найти его у детей. expect(wrapper.type()).toEqual('button');

В CheckoutButton.js обновите свой код, чтобы:

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;

Согласно соглашению об именовании компонентов React, вы всегда должны указывать свой компонент в PascalCase.

Имя компонента всегда должно начинаться с буквы «Столица». Выполнение этого изменения пройдет тест.

Более подробную информацию вы можете найти здесь: Соглашение об именах компонентов .