酶如何检查组件的可见性？ [英] How can Enzyme check for component visibility?

问题描述

我附上了我遇到的问题的精简版。我有一个简单的复选框，我可以使用 opacity：0 隐藏它，具体取决于传递给包含<$的组件的内容c $ c>复选框（在这种情况下为 MyCheckbox ）

I've attached a cut down version of an issue I am having. I have a simple Checkbox which I hide using opacity : 0 depending on what is passed into the component containing the Checkbox (in this case MyCheckbox)

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

I have a component which uses MyCheckbox called MyCheckboxesInUse which results in one checkbox showing and the other being hidden.

如何检查在Jest / Enzyme测试中这些功能的可见性？我看过很多文章，但找不到有效的东西！

How do I check the visibility of each of these in a Jest/Enzyme test ? I've looked at lots of posts but can't find something that works!

代码并在CodeSandbox

Code and test running here on CodeSandbox

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

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

推荐答案

您可以试用<$ c $ testing-library 中的c> jest-dom ，但是如果您想了解他们如何实现所需的内容，请查看其代码： https://github.com/testing-库/jest-dom/blob/master/src/to-be-visible.js

You can tryout jest-dom from testing-library, but if you want to see how they implement what you want, check out their code: https://github.com/testing-library/jest-dom/blob/master/src/to-be-visible.js

这篇关于酶如何检查组件的可见性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！