библиотека Resact-Testing-RequestByTestId, возвращающая NULL - PullRequest
Новая
       9

библиотека Resact-Testing-RequestByTestId, возвращающая NULL

0 голосов
/ 08 марта 2019

Я переключаюсь с использования enzyme на react-testing-library для тестирования моих компонентов.

У меня есть простой компонент CustomModal, который действует как обертка вокруг Modal из reactstrap. Я пытаюсь проверить, что мой CustomModal включает в себя дочерние элементы, которые он должен.

Взяв мои реплики из этой статьи и этой статьи , я добавляю data-testid атрибутов для своих детей, а затем я использую getByTestId и queryByTestId. Но по какой-то причине мои запросы не находят дочерние узлы, которые, насколько я могу судить, существуют.

Есть ли что-то, что я делаю неправильно в моей тестовой настройке, или я неправильно понимаю, как react-testing-library следует использовать?

Основной код вместе с тестом (который не проходит) можно найти в этом CodeSandbox: Edit react-testing-library queryByTestId

Мой базовый CustomModal компонент выглядит так: 

/*
 * src/components/CustomModal/index.js
 */

import React from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

const getSanitizedModalProps = props => {
  let modalProps = { ...props };
  delete modalProps.onConfirm;
  delete modalProps.onCancel;
  delete modalProps.headerText;
  delete modalProps.children;
  modalProps.isOpen = modalProps.isOpen === true;
  return modalProps;
};

export default props => {
  return (
    <Modal data-testid="modal" {...getSanitizedModalProps(props)}>
      <ModalHeader data-testid="modal-header">{props.headerText}</ModalHeader>
      <ModalBody data-testid="modal-body">{props.children}</ModalBody>
      <ModalFooter data-testid="modal-footer">
        <Button data-testid="confirm-button" onClick={props.onConfirm}>
          Confirm
        </Button>
        <Button data-testid="cancel-button" onClick={props.onCancel}>
          Cancel
        </Button>
      </ModalFooter>
    </Modal>
  );
};

Мой тестовый файл выглядит так: 

/*
 * src/components/CustomModal/CustomModal.test.js
 */

import React from "react";
import { render } from "react-testing-library";
import CustomModal from "./index";

const TEST_IDS = {
  modal: "modal",
  header: "modal-header",
  body: "modal-body",
  footer: "modal-footer",
  cancel: "cancel-button",
  confirm: "confirm-button"
};

describe("<Modal />", () => {
  const headerText = "hello world";
  it("renders all of the children", () => {
    const { queryByTestId } = render(<CustomModal headerText={headerText} />);

    // The following assertions all fail
    expect(queryByTestId(TEST_IDS.modal)).toBeTruthy(); 
    expect(queryByTestId(TEST_IDS.header)).toBeTruthy();
    expect(queryByTestId(TEST_IDS.body)).toBeTruthy();
    expect(queryByTestId(TEST_IDS.footer)).toBeTruthy();
    expect(queryByTestId(TEST_IDS.cancel)).toBeTruthy();
    expect(queryByTestId(TEST_IDS.confirm)).toBeTruthy();
  });
});

1 Ответ

1 голос
/ 08 марта 2019

Ваш модал закрыт, вам нужно передать ему isOpen: 

render(<CustomModal headerText={headerText} isOpen />);
...