Для начала я использовал 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.
@LukeHutton Я пробовал, не работает.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Потому что он у вас в корне, а вы пытаетесь найти его у детей. Ваш ожидаемый должен быть expect(wrapper.type()).toEqual('button');
Это странно, потому что это должно работать. airbnb.io/enzyme/docs/api/ShallowWrapper/type.html
@ sp92 Насколько я знаю, expect(wrapper.contains('button')).toBeTruthy() тоже должен работать
Да, я тоже пробовал, все равно не работает. Это так странно.
@ sp92, это действительно странно. Я предлагаю также сделать компонент Button именованной функцией и использовать имя с заглавной буквы (export default function 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.
Название компонента всегда должно начинаться с заглавной буквы. Внесение этого изменения пройдет проверку.
Более подробно здесь: Соглашение об именах компонентов.
Можете ли вы поделиться журналами сбоев тестовых случаев, чтобы получить более подробную информацию?
Ваш конфигурация адаптера кажется неправильным.
Пытаться:
configure({ adapter: new Adapter() });
вместо того:
configure({
adapter: ({adapter: new Adapter()})
});
омг, я такая неповоротливая, спасибо! ... теперь написано Test Suites: 1 failed, 1 passed, 2 total Tests: 1 failed, 1 passed, 2 total. Я хочу, чтобы все прошло
Я не понимаю, как я провалил один из тестов.
@ sp92 Я вижу только один рассматриваемый тест ... однако попробуйте поиграть с console.info(wrapper.debug()), это действительно помогает выявлять проблемы
пробовать
wrapper.find('#test')?