Как получить доступ к вложенному компоненту в тестировании Enzyme React

import React from "react";
import Adapter from "enzyme-adapter-react-16";
import { configure, shallow, mount } from "enzyme";
import Banking, { BankingForm } from './Banking';

configure({ adapter: new Adapter() });
describe('FormikHandlers', () => {
    describe('handleChangeEvent', () => {
      it('change value for firstBankName', async () => {
      const component = shallow(<Banking />);

      expect(component.find(BankingForm)).toHaveLength(1);

    });
  });
});

здесь у меня есть Banking как родительский компонент и bankForm как дочерний компонент, который имеет все поля. Я использую formik render prop внутри родительского компонента Baking. Этот тест не проходит, потому что я не могу получить компонент "BankingForm" внутри компонента, когда он отображается неглубоко. Я что-то не так делаю с точки зрения энызма?

вы можете показать свои компоненты? вы там используете какой-нибудь HOC? Кроме того, .dive() / mount() может помочь, мне интересно, лучше ли лучше подходить к тщательному тестированию

skyboyer 11.10.2018 23:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
1
3 486
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

component.dive (). find (BankingForm) нравится?

Pavan 11.10.2018 16:23

Да, но все равно зависит от структуры компонентов. Взгляните на пример документа dive.

Andreas Köberle 11.10.2018 19:00

На самом деле это была оболочка <Form /> внутри компонента. Так что он не был доступен напрямую.

Pavan 12.10.2018 09:11

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