Javascript 酶如何检查组件的可见性?
我附上了一个问题的精简版本。我有一个简单的复选框,我使用不透明度隐藏它:0,这取决于传递到包含该复选框的组件中的内容(在本例中为MyCheckbox) MyCheckBox.js MyCheckbox.test.jsJavascript 酶如何检查组件的可见性?,javascript,reactjs,jestjs,material-ui,enzyme,Javascript,Reactjs,Jestjs,Material Ui,Enzyme,我附上了一个问题的精简版本。我有一个简单的复选框,我使用不透明度隐藏它:0,这取决于传递到包含该复选框的组件中的内容(在本例中为MyCheckbox) MyCheckBox.js MyCheckbox.test.js 您可以从测试库中试用jest dom,但如果您想了解他们是如何实现您想要的,请查看他们的代码:谢谢。看起来是我需要的。当我尝试它的时候,我得到了期望…不,tobevicible不是一个函数。请参见此处更新的CodeSandbox--> import React from "reac
您可以从测试库中试用jest dom,但如果您想了解他们是如何实现您想要的,请查看他们的代码:谢谢。看起来是我需要的。当我尝试它的时候,我得到了期望…不,tobevicible不是一个函数。请参见此处更新的CodeSandbox-->
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>
);
}
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>
);
}
import React from "react";
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
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);
expect(checkboxes).toHaveLength(2);
//HOW DO I CHECK THAT ONE IS VISIBLE AND THE OTHER IS NOT ?
});