isVisible не работает в тесте Jest с использованием jest-dom - PullRequest
Новая
       6

isVisible не работает в тесте Jest с использованием jest-dom

0 голосов
/ 17 июня 2020

Edit check-checkbox-hidden-with-jsdom

Я создал максимально упрощенный CodeSandbox, чтобы воспроизвести свою проблему. Вы можете увидеть неудачный тест, запущенный в CodeSandbox.

В моем примере у меня есть компонент с именем MyCheckbox, который является просто оболочкой для материала-ui Checkbox. Требуется опора data, которая представляет собой просто массив. Если в массиве что-то есть, флажок получает opacity : 1, иначе получает opacity : 0

import React from "react";
import "./styles.css";
import { Checkbox, makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  checkboxHiddenStyle: {
    opacity: 0
  }
});

export default function MyCheckbox(props) {
  const styles = useStyles(props);
  return (
    <div>
      <Checkbox
        {...props}
        className={props.data.length === 0 && styles.checkboxHiddenStyle}
      />
    </div>
  );
}

Я создаю два экземпляра MyCheckbox в MyCheckboxesInUse, чтобы один был виден, а другой нет. . 

import React from "react";
import MyCheckbox from "./MyCheckbox";
import "./styles.css";

export default function MyCheckboxesInUse() {
  const arrayWithNothing = [];
  const arrayWithSomething = [1];
  return (
    <div className="App">
      <h1>Hidden Checkbox</h1>
      <MyCheckbox data={arrayWithNothing} />
      <h1>Visible Checkbox</h1>
      <MyCheckbox data={arrayWithSomething} />
    </div>
  );
}

.... что приводит к следующему в браузере

enter image description here

Затем у меня есть простой тест, который проверяет, что первый флажок скрыт, а второй виден 

import React from "react";

import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import "@testing-library/jest-dom";
import MyCheckboxesInUse from "./MyCheckboxesInUse";
import MyCheckbox from "./MyCheckbox";

Enzyme.configure({ adapter: new Adapter() });

test("Check that one checkbox is hidden and the other is visible", () => {
  const wrapper = mount(<MyCheckboxesInUse />);

  const checkboxes = wrapper.find(MyCheckbox).find('input[type="checkbox"]');
  expect(checkboxes).toHaveLength(2);


  expect(checkboxes.at(0).getDOMNode()).not.toBeVisible();
  //This checkbox is in fact visible but the following test step is failing ??
  expect(checkboxes.at(1).getDOMNode()).toBeVisible();
});

Тест не проходит со следующей ошибкой, хотя второй флажок четко виден. Это ошибка в jest или jest-dom ?? 

expect(element).toBeVisible()

Received element is not visible:
  <input class="PrivateSwitchBase-input-5" data-indeterminate="false" type="checkbox" value="" />
...