Фермент рендерит обернутый компонент, а не базовый компонент

Question

Я тестирую свое приложение React с помощью Jest и Enzyme. Я пытаюсь экспортировать тестируемую версию моего компонента, которая не включена в компонент более высокого порядка.

Затем я хочу экспортировать упакованный компонент, чтобы мое приложение могло его использовать, а также тестируемую версию, то есть не упакованную версию моего компонента.

Это мой компонент:

NavBar.jsx

const NavBar = ({props}) => {(
  <div>...</div>
)}

export { NavBar as TestableNavBar };

export default withStyles(styles)(NavBar);

NavBar.test.js

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import { TestableNavBar } from './NavBar';

const props = {
  ...
};

describe('Navbar', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<TestableNavBar {...props} />);
    const tree = toJson(wrapper);
    expect(tree).toMatchSnapshot();
  });
});

Выше приведен снимок, который выглядит следующим образом:

<div>
  <withStyles(AppBar)
    className=""
  >
    <withStyles(Toolbar)
      disableGutters={true}
    >
      <withStyles(IconButton)
        aria-label="open drawer"
        className=""
        color="contrast"
        onClick={[Function]}
      >
      ...
</div>

Я не могу понять, почему он все еще пытается отобразить HOC?

Answer 1

энзимаshallow Метод просто отображает детей, объявленных в методе рендеринга (AppBar, Toolbarи т. д.), и вывод показывает, что они обернуты тем же withStyles HOC.

Экспорт тестируемой версии вашего корневого компонента позволяет вам фактически проверить его реальный вывод (div), но не помешает оборачивать его дочерний компонент withStyles HOC.

Если вы хотите проверить окончательный вывод вашего компонента, вы можете подумать о переходе на ферментныеmount метод рендеринга.