Тестовый компонент React Enzyme Jest с className

я Следуя обоим примерам Enzyme для .найти() и этому примеру GitHub фермент-пример-шутка, чтобы получить базовый компонент для тестирования и проверки существования самого внешнего элемента className, я не понимаю, почему это не проходит:

// КОМПОНЕНТ РЕАГИРОВАНИЯ

class VisitorShortcut extends Component {
//all the props & lifecycle hooks here
render() {
        return (
            <div className = "visitor-shortcuts"> // <-- this className is being tested
                <div
                    onClick = {e => e.stopPropagation()}
                    className = "dropdown open"
                >
                    <ul
                        style = {style}
                        ref = "shortcutContainer"
                        className = {"dropdown-menu "}
                    >
                        {results}
                    </ul>
                </div>
            </div>
        );
    }
}

// ТЕСТОВЫЙ ФАЙЛ

import React from "react";
import { shallow, mount } from "enzyme";
import VisitorShortcut from "../VisitorShortcut";

describe("Shortcuts", () => {
  test("The main Class exists", () => {
    expect(
        (<VisitorShortcut />).find(".visitor-shortcuts").length
    ).toBe(1);
  });
});

// ВЫХОД

Expected value to be (using ===):
  1
Received:
  0

если я переключаюсь на expect(wrapper.find('div.some-class')).to.have.length(3); в соответствии с документацией Enzyme, вывод будет TypeError: Cannot read property 'have' of undefined

Я совершенно уверен, что мне не нужно использовать API mount вместо shallow.

Спасибо, что помогли прояснить это. Это кажется таким простым ...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
10
0
22 680
4

Ответы 4

Приведенный ниже код работал у меня

import React from "react";
import { shallow, mount } from "enzyme";
import { assert } from 'chai';
import VisitorShortcut from "../VisitorShortcut";    


describe("Shortcuts", () => {
  test("The main Class exists", () => {
    const wrapper = shallow(<VisitorShortcut />);
    const visitorShortcutsWrapper = wrapper.find('.visitor-shortcuts');
    assert.equal(visitorShortcutsWrapper.length, 1);
  });
});

Кстати, я использую assert из пакета chai.

Когда у меня console.info(wrapper.find(".visitor-shortcuts")); длина = 0

Phil Lucks 21.03.2018 21:28

Пользуюсь chai, работает.

import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import App from './App';

describe('<App />', () => {
  const wrapper = shallow(<App />);

  it('should have an App class', () => {
    expect(wrapper.find('.App')).to.have.length(1);
  });
});

Это работает для проверки наличия двух подэлементов элемента в Jest.

expect(wrapper.find('.parent-class').getElements().length).toEqual(2)

в соответствии с документом Enzyme вы можете сделать следующее:

const wrapper = shallow(<VisitorShortcut />);
expect(wrapper.find("div.visitor-shortcuts").length).toBe(1)

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