Enzyme如何检查组件的可见性？

Question

我已经附上了我所遇到的一个问题的缩减版。我有一个简单的 Checkbox 我用 opacity : 0 取决于传递到包含该组件的 Checkbox 在此 MyCheckbox)

我的CheckBox.js

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 导致一个复选框显示，另一个复选框被隐藏。

我如何在JestEnzyme测试中检查每个复选框的可见性？我看了很多帖子，但没有找到有效的方法。

代码和测试在CodeSandbox上运行。

我的CheckBoxesInUse.js。

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

我的Checkbox.test.js

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

Answer 1

你可以尝试一下 jest-dom 从 testing-library但如果你想知道他们是如何实现你想要的东西，请查看他们的代码。https:/github.comtesting-libraryjest-domblobmastersrcto-be-visible.js。