Состояние не восстанавливается в интерфейсе материалов / тесте фермента?

Question

Я монтирую свой компонент и устанавливаю состояние в конструкторе следующим образом.

Немного неясно, почему это не работает.Из документов, которые я прочитал, говорится, что mount полностью отобразит компонент и подкомпоненты, и он должен вызвать render, constructor и несколько других функций жизненного цикла.Есть ли что-то, что мне не хватает, из-за чего состояние не отображается в ReactWrapper?

class UserBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      logOutMenuOpen: false,
      anchorElement: null,
    };
  }

  render() {...}
}

//TESTS BELOW

import React from 'react';
import { createMount } from '@material-ui/core/test-utils';
import UserBox from './UserBox';

describe('User Box', () => {
  let closedUserBox;
  let openedUserBox;
  const mount = createMount();
  beforeEach(() => {
    closedUserBox = mount(<UserBox />);
    openedUserBox = mount(<UserBox open />);
  });
  afterEach(() => {
    closedUserBox.unmount();
    openedUserBox.unmount();
  });
  describe('Opened User Box', () => {
    beforeEach(() => {
      openedUserBox = mount(<UserBox open />);
    });
    afterEach(() => {
      openedUserBox.unmount();
    });

    it('should have expandedAvatar class', () => {
      const avatar = openedUserBox.find('#userAvatar').first();
      expect(avatar).not.toBeUndefined();
      expect(avatar.prop('className')).toContain('expandedAvatar');
    });

    it('Should open logout menu on menu clicked', () => {
      const state = openedUserBox.state(); //returns null
      const anotherState = openedUserBox.instance().state(); //returns null    });
  });

Answer 1

withStyles - это HOC, что означает, что он оборачивает вокруг вас другой компонент.

Таким образом, mount(withStyles(UserBox)).state() будет состоянием HOC, а не фактическим компонентом. Вам нужно будет извлечь оригинальный компонент.

Вы не должны тестировать свои компоненты, как это, но если вы действительно думаете, что вы должны протестировать детали реализации, тогда вы можете сделать что-то вроде wrapper.find('UserBox').state(). Фермент будет искать компонент с отображаемым именем UserBox, который должен быть вашим исходным компонентом с состоянием.