Как проверить метод детского компонента с ферментом?

У меня есть такой компонент:

<Parent>
  <Child/>
</Parent>

и <Child/> имеют метод foo. Я хочу протестировать метод foo, но я не знаю, как получить к нему доступ. Я пробовал:

mount(<Parent><Child/></Parent>).props().children.foo

или

mount(<Parent><Child/></Parent>).children().foo

но оба они undefined. Я не могу использовать .instance(), потому что он не root. Я не могу установить <Child/> только потому, что <Parent> добавить что-то (реакция-маршрутизатор context.router) на context, и мне это нужно, когда init <Child/>. Любая идея с этим?

Ответ 1

Я бы рассмотрел возможность написания тестов только для вашего родительского класса, а затем для отдельного тестового файла только для проверки вашего ребенка.

Как только вы установили компонент, используя:

const component = mount(<Child>);

у вас есть доступ к ним, используя:

component.instance().methodname

Затем вы можете сделать что-то вроде переопределения с помощью jest.fn() и протестировать соответствующим образом.

Ответ 2

Я думаю, ваша проблема отличается от того, как тестировать дочерние компоненты.

Мой первый вопрос: почему вы проверяете, имеет ли дочерний компонент определенный метод в тестах родительских компонентов?

ИМХО вам нужно иметь тест, специфичный для этого компонента, и затем в этом тесте вы проверяете, существует ли метод.

Чтобы не уйти без ответа, вы пробовали .find(Child).instance().foo?

Ответ 3

Я предпочитаю мелкое крепление над полным креплением от фермента.

В сочетании с Proxyquire для разрешения дочернего компонента (который вы хотите проверить) я делаю

wrapper.find('Child1').props().propName

И проверить это.

Или я использую мелкое

mount wrapper.dive()

Ответ 4

У меня была похожая проблема при попытке смоделировать функцию на внутреннем компоненте в MemoryRouter:

cont wrapper = mount(<MemoryRouter><AvailabilityButtonWithRouter.WrappedComponent vetId={ vetId  } appointment={ availability } /></MemoryRouter>);

В итоге я смог смоделировать функцию так:

const mockFn = jest.fn();    
wrapper.children(0).children(0).instance().reloadCurrentPage = mockFn;

Ответ 5

Я смог получить дескриптор дочерней функции, как показано ниже, я искал первого дочернего элемента для вызова функции -

const component = shallow(<Component />);
component.find(Child).first().getNode().props.someChildFunction()

Ответ 6

Это сработало для меня:

mount(<Parent><Child/></Parent>).find(Child).instance().foo

Ответ 7

Я столкнулся с подобной проблемой, и я прошел mount API путем регистрации. В моем случае использования, мой компонент ребенка (CommonStoresReactions) оборачивают mobx inject.

const jsx = (
    <Provider {...stores}>
      <CommonStoresReactions>
        <div />
      </CommonStoresReactions>
    </Provider>
)
const wrapper = mount(jsx)

Я хочу проверить clearStores метод в CommonStoresReactions. Ниже фрагмент работал для меня.

wrapper
      .find(CommonStoresReactions)
      .instance()
      .wrappedInstance.clearStores()