0

Edit check-checkbox-hidden-with-jsdom

I've created as simplified a CodeSandbox as I can to reproduce my issue. You can see the failing test running in the CodeSandbox.

In my example I have a component called MyCheckbox which is just a wrapper around a material-ui Checkbox. It takes a prop data which is just an array. If the array has something in it the Checkbox gets opacity : 1 otherwise gets 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>
  );
}

I create two instances of MyCheckbox in MyCheckboxesInUse so that one is visible and the other isn't.

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>
  );
}

....which results in the following in the browser

enter image description here

I then have a simple test which checks that the first checkbox is hidden and the second one is visible

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();
});

The test fails with the following error even though the second checkbox is clearly visible. Is this a bug in jest or jest-dom ??

expect(element).toBeVisible()

Received element is not visible:
  <input class="PrivateSwitchBase-input-5" data-indeterminate="false" type="checkbox" value="" />
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
Simon Long
  • 1,310
  • 4
  • 20
  • 39
  • Possible duplicate of https://stackoverflow.com/questions/52813527/cannot-check-expectelm-not-tobevisible-for-semantic-ui-react-component . – Estus Flask Jun 17 '20 at 11:56
  • @EstusFlask - I can't see how that duplicate answers my question seeing as I'm not using any external CSS. I'm just using JSS as per my posted code. – Simon Long Jun 17 '20 at 13:01
  • Is it possibly related to this open bug in js-dom ? Any workaround ? https://github.com/testing-library/jest-dom/issues/209 – Simon Long Jun 17 '20 at 13:02
  • 1
    The bug you listed is not JSDOM but Testing Library. Any way, this seems to not be the case, the error you get is correct because input is hidden in both cases. MUI uses input checkbox to handle UI state but doesn't show it because it cannot be styled. You need to assert that parent span is visible. At this point I'm not sure if Testing Library is worth it because you end up testing the internals of MUI component you didn't write. Considering that MUI works as it should (there's a team that tested it), something like `expect(checkboxes.at(0).getDOMNode().checked).toBe(false)` would be safer. – Estus Flask Jun 17 '20 at 13:42

0 Answers0