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

Question

我有以下组件并尝试对其执行测试。
我能够找到所有其他组件，例如 Element 和 Table。
但没有找到 Button 对象的结果，即使其中有 2 个。
为什么会这样？
注意这里的Button,Element和Table组件都是我自定义的组件

正在测试的组件

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

现在的问题似乎与此处解释的内容有关：

React component name and props (Button, Button[type="submit"], etc) - however, please note that it is strongly encouraged to find by component constructor/function and not by display name.

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

我的建议是这样更改您的代码：

wrapper.find(Button);

所以基本上按照文档的建议进行操作：“按组件 constructor/function 而不是显示名称查找”。

有趣的一点：

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

All user agents treated the HTML element and attribute names tested as case-insensitive.

即使找到 Table 看起来很奇怪。

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

Unable to find only Button Component for test

javascript

reactjs

jestjs

enzyme