Я использовал 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.
Всего 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.
Имя компонента всегда должно начинаться с буквы «Столица». Выполнение этого изменения пройдет тест.
Более подробную информацию вы можете найти здесь: Соглашение об именах компонентов .