Question

我基本上有这个问题：

https://github.com/airbnb/enzyme/issues/208

但是我的组件包装在jss withStyles包装器中。我正在使用shallow method created by Material-UI as outlined here.

例如：

class Button extends React.Component {
  handleClick() {
    // Do something here
  }
  render() {
    // Component here
  }
}

const styles = {
     root: {}
}

export withStyles(styles)(Button);

问题是-wrapper.instance().handleClick()将抛出handleClick() is not a function。

如何访问组件本身？

Answer 1

您可以使用dive来访问组件。

MUI似乎还具有“ dive”功能：

createShallow（）函数可用于这种情况。除了包装酶API外，它还提供了下潜和直到Selector选项。

import { createShallow } from '@material-ui/core/test-utils';

describe('<MyComponent />', () => {
  let shallow;

  before(() => {
    shallow = createShallow({dive: true}); // Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result.
  });

  it('should work', () => {
    const wrapper = shallow(<MyComponent />);
  });
});

使用react-jss和酶时如何测试组件方法？

1 个答案: