Как мне проверить тестовый компонент, завернутый в memo и withStyles?

Question

У меня есть компонент, который обернут как в Material-UI withStyles HOC, так и в React memo HOC.

Я не могу проверить этот компонент, так как не могу позвонить dive():

ShallowWrapper::dive() can only be called on components

Единственный вариант, который мне известен в настоящее время, - это самостоятельно export Demo и export default withStyles(styles)(Demo).Это позволяет мне тестировать компонент, который не включен в withStyles.Я хотел бы избежать этого метода.

Если я удалю memo (), я смогу протестировать компонент.Аналогичным образом, если я удаляю withStyles (), я также могу протестировать компонент.Сочетание этих HOC делает мой компонент недоступным для тестирования.

Какие существуют стратегии для эффективного тестирования этого компонента?

demo.js

import React, { memo } from "react";
import MUIIconButton from "@material-ui/core/IconButton";
import { withStyles } from "@material-ui/core/styles";
import Tooltip from "@material-ui/core/Tooltip";
import Typography from "@material-ui/core/Typography";

const styles = () => ({
  root: {
    backgroundColor: "red"
    /* more styles... */
  }
});

const Demo = memo(({ label, classes }) => (
  <div className={classes.root}>
    <Tooltip disableFocusListener title={label}>
      <Typography>label</Typography>
    </Tooltip>
  </div>
));

export default withStyles(styles)(Demo);

demo.test.js

import React from "react";
import Adapter from "enzyme-adapter-react-16";
import { configure, shallow } from "enzyme";
import Demo from "./demo";
import MUIIconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";

configure({ adapter: new Adapter() });

describe("Demo", () => {
  it("Should have a tooltip with label", () => {
    const tooltip = "My tooltip";

    const el = shallow(<Demo label={tooltip} />).dive();

    expect(el.find(Tooltip).props().title).toEqual(tooltip);
  });
});

Полностью рабочая песочница

Answer 1

Как говорит скайбойер, вам нужно просто export запоминать функцию. Вы можете import экспортировать HOC по умолчанию и использовать mount, но вам нужно будет смоделировать объект classes, чтобы он соответствовал тому, как он используется в компоненте.

Рабочий пример : https://codesandbox.io/s/4r492qvoz9

компоненты / Demo / demo.js

import React, { memo } from "react";
import MUIIconButton from "@material-ui/core/IconButton";
import { withStyles } from "@material-ui/core/styles";
import Tooltip from "@material-ui/core/Tooltip";
import Typography from "@material-ui/core/Typography";

const styles = () => ({
  root: {
    backgroundColor: "red"
    /* more styles... */
  }
});

export const Demo = memo(({ label, classes }) => {
  return (
    <div className={classes.root}>
      <Tooltip disableFocusListener title={label}>
        <Typography>label</Typography>
      </Tooltip>
    </div>
  );
});

export default withStyles(styles)(Demo);

component / Demo / __ tests __ / demo.test.js если когда-либо понадобится увидеть структуру DOM, просто используйте console.log(wrapper.debug()); - например, console.log(mountHOComponent.debug());)

import React from "react";
import Adapter from "enzyme-adapter-react-16";
import { configure, shallow, mount } from "enzyme";
import { Demo } from "../demo";
import HOCDemo from "../demo";

configure({ adapter: new Adapter() });

const initialProps = {
  label: "My tooltip",
  classes: {
    root: "component-example"
  }
};

const shallowWrapper = shallow(<Demo {...initialProps} />);
const mountWrapper = mount(<Demo {...initialProps} />);
const mountHOComponent = mount(<HOCDemo {...initialProps} />);

describe("Demo", () => {
  afterAll(() => {
    shallowWrapper.unmount();
    mountWrapper.unmount();
  });

  it("shallowWrap renders a tooltip with label", () => {
    expect(shallowWrapper.find("WithStyles(Tooltip)").props().title).toBe(
      initialProps.label
    );
  });

  it("mountWrap renders a tooltip with label", () => {
    expect(mountWrapper.find("Tooltip").props().title).toBe(initialProps.label);
  });

  it("mountHOComponent renders a tooltip with label", () => {
    expect(mountHOComponent.find("Tooltip").props().title).toBe(
      initialProps.label
    );
  });
});

Answer 2

Теперь это исправлено с фермент-адаптер-реакция-16 v1.13.0 , в котором добавлена ​​поддержка memo dive (). Вот раздвоенная песочница с обновленной зависимостью, показывающая, что оба метода тестирования (обходные пути для погружения и экспорта) теперь проходят.