Почему я не могу обнаружить кнопочный элемент с помощью фермента?

Для начала я использовал 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.

пробовать wrapper.find('#test')?

Luke Hutton 10.10.2018 02:24

@LukeHutton Я пробовал, не работает.

sp92 10.10.2018 02:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
49
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

Это странно, потому что это должно работать. airbnb.io/enzyme/docs/api/ShallowWrapper/type.html

Eugene Tsakh 10.10.2018 02:30

@ sp92 Насколько я знаю, expect(wrapper.contains('button')).toBeTruthy() тоже должен работать

Eugene Tsakh 10.10.2018 02:47

Да, я тоже пробовал, все равно не работает. Это так странно.

sp92 10.10.2018 02:51

@ sp92, это действительно странно. Я предлагаю также сделать компонент Button именованной функцией и использовать имя с заглавной буквы (export default function Button() { ... }). Может, поможет ...

Eugene Tsakh 10.10.2018 03:03

В 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.

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

Более подробно здесь: Соглашение об именах компонентов.

Можете ли вы поделиться журналами сбоев тестовых случаев, чтобы получить более подробную информацию?

Piyush Maurya 10.10.2018 04:57
Ответ принят как подходящий

Ваш конфигурация адаптера кажется неправильным.

Пытаться:

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 10.10.2018 14:22

Я не понимаю, как я провалил один из тестов.

sp92 10.10.2018 14:32

@ sp92 Я вижу только один рассматриваемый тест ... однако попробуйте поиграть с console.info(wrapper.debug()), это действительно помогает выявлять проблемы

Alex 10.10.2018 14:36

Другие вопросы по теме