Question

我正在安装我的组件，并像这样在构造函数中设置状态。

尚不清楚为什么它不起作用。从我阅读的文档中可以看出，mount将完全渲染组件和子组件，并且应该调用render，构造函数和其他一些生命周期函数。我是否缺少某些导致状态不在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的组件，该组件应该是带有状态的原始组件。

是否在Material UI / Enzyme Test中未检索到状态？

1 个答案: