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
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="" />