无法找到仅用于测试的Button组件

Question

我有以下组件，并试图对其执行测试。

我能够找到所有其他组件，如元素和Table。

但是，找到Button对象没有结果，尽管其中有两个。

为什么是这种情况？

注意，这里的元素和表组件都是我的自定义组件。

正在测试的组件

export const MyComponent = () => (
  <div>
    <div style={{ margin: 20 }}>
      <Button onClick={() => {}}>
        Click Me!
      </Button>
      <Button onClick={() => {}}>
        Click Me!
      </Button>
    </div>

    <Element name="name">
      title
    </Element>
    <div>
      <Table name="name" />
    </div>
  </div>
);

export default MyComponent;

我的测验

describe('test page', () => {

     it('should click', () => {

    const mockSelectorToggle = jest.fn();
    const defaultProps = {};
    const initialise = props => shallow(<MyComponent {...defaultProps} {...props} />);
    const wrapper = initialise();

    // all the following found
    wrapper.find('div')
    wrapper.find('div').find('div')
    wrapper.find('Element')
    wrapper.find('Table')

    // nothing found. Why only Button not findable?
    // wrapper.find('Button')
    // wrapper.find('div').find('div').find('Button')

    // looking to test it this way
    wrapper.find('Button').first().simulate('click');
    expect(mockSelectorToggle).toHaveBeenCalled();
  });
});

Answer 1

根据Enzyme文档，有各种各样的选择器可用，特别是

https://enzymejs.github.io/enzyme/docs/api/selector.html#1-a-valid-css-selector

还有这个

https://enzymejs.github.io/enzyme/docs/api/selector.html#2-a-react-component-constructor

现在，这个问题似乎与这里解释的内容有关：

反应组件名称和道具(按钮，Buttontype=“提交”等)-但是，请注意，强烈鼓励它找到组件构造函数/函数，而不是显示名称。

我的印象是，选择器搜索的是HTML标记，而不是实际的button组件。

我的建议是以这样的方式更改代码：

wrapper.find(Button);

因此，基本上按照文档所建议的那样做：“按组件构造函数/函数查找，而不是按显示名称查找”。

有趣的一点是：

https://www.w3.org/International/tests/html-css/selectors-case/results-selectors-case#elemattrname

所有用户代理都将测试的HTML元素和属性名称视为不区分大小写的.

即使Table被发现似乎很奇怪。