Как Enzyme может проверить видимость компонентов? - PullRequest
Новая
       19

Как Enzyme может проверить видимость компонентов?

0 голосов
/ 16 июня 2020

Я приложил сокращенную версию возникшей у меня проблемы. У меня есть простой Checkbox, который я скрываю с помощью opacity : 0 в зависимости от того, что передается в компонент, содержащий Checkbox (в данном случае 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, в результате чего один флажок отображается, а другой скрывается.

Как проверить видимость каждого из них в тесте Jest / Enzyme? Я просмотрел множество сообщений, но не нашел ничего, что работает!

Код и тест выполняются здесь, на CodeSandbox Edit check-checkbox-hidden

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

1 Ответ

1 голос
/ 16 июня 2020

Вы можете попробовать jest-dom из testing-library, но если вы хотите увидеть, как они реализуют то, что вы хотите, посмотрите их код: https://github.com/testing-library/jest-dom/blob/master/src/to-be-visible.js

...