Тестирование модального окна обратного вызова в React - PullRequest
Новая
       3

Тестирование модального окна обратного вызова в React

0 голосов
/ 22 апреля 2020

Я искал в Интернете пару дней, но не могу найти способ найти компонент, отображаемый в режиме реакции- bootstrap.

Приложение. js

import React, { useState } from 'react'
import {Modal} from "react-bootstrap";

export const App = ({doSomething}) => {
  const [showModal, setShowModal] = useState(false);
  const toggleModal = () => setShowModal(!showModal);
  const handleClick = () => {
    setShowModal(!showModal);
    doSomething();
  }
  return (
    <>
      {showModal
        ? <MyModal toggleModal={toggleModal} onClick={handleClick}/>
        : <></>
      }
      <button onClick={toggleModal}>
        Click to open modal
      </button>
    </>
  );
};

const MyModal = ({toggleModal, handleClick}) => {
  return (
    <Modal show={true} onHide={toggleModal}>
      <button id="callbackHandler" onClick={handleClick} >
        Click me to trigger call handler in App
      </button>
    </Modal>
  );
}

App.test. js

import React from 'react';
import ReactDOM from "react-dom";
import ReactTestUtils from 'react-dom/test-utils';
import { App } from './App'

describe('App', () => {

  it('calls the callback handler when modal button is clicked', () => {

    const callbackSpy = jest.fn()
    const container = document.createElement('div');
    ReactDOM.render(<App doSomething={callbackSpy}/>, container);
    const button = container.querySelector('button');
    ReactTestUtils.Simulate.click(button);

    const modalButton = container.querySelector('#callBackHandler') // Can't locate this element
    ReactTestUtils.Simulate.click(modalButton); // Cannot read property of null
    expect(callbackSpy).toHaveBeenCalled()
  })

});

При сборке модал работает правильно и вызывается функция внутри обработчика обратного вызова. Но я не могу понять, как сделать модальный рендер в месте, где я могу получить к нему доступ с помощью шутки / энзима.

...