在 Jest 测试中使用 Enzyme 在 React 中查找命名空间子组件答案

【问题标题】：Use Enzyme in Jest test to find a name-spaced child component in React在 Jest 测试中使用 Enzyme 在 React 中查找命名空间子组件
【发布时间】：2017-03-03 17:23:13
【问题描述】：

我正在使用一些 react-bootstrap 组件构建一个组件，特别是 Modal 及其名称间隔的子组件，例如Modal.Heading（或 Modal.Title、Modal.Body 等）。例如：

...
import { Modal } from 'react-bootstrap/lib';
import OtherComponent from './OtherComponent';
class MyComponent extends React.Component {
  ...
  render() {
    return (
      <div>
        <Modal>
          <p>{someContent}</p>
          <OtherComponent/>
          <Modal.Header>{someOtherContent}</Modal.Header>
        </Modal>
      </div>
    );
  }
}

在 Jest 测试套件中使用 Enzyme 我可以找到 Modal 组件的各种子组件，包括 DOM 元素和其他自定义 React 组件。但是我找不到名称间隔的子组件：

const modal = shallow(<MyComponent/>).find('Modal');

it('should find the Modal element', () => {
  expect(modal).toHaveLength(1); // passes
});

it('should find a child DOM element', () => {
  expect(modal.find('p')).toHaveLength(1); // passes
});

it('should find a regular child component', () => {
  expect(modal.find('OtherComponent')).toHaveLength(1); // passes
});

it('should find a name-spaced child component', () => {
  expect(modal.find('Modal.Header')).toHaveLength(1); // fails *****
});

我试过了：

.find('Modal.Header')，即包含命名空间，如上图
.find('Header')，即离开命名空间，
mount(<MyComponent/>) 而不是 shallow(<MyComponent/>) 与上述两个 find 选项的组合

那么我如何使用 Enzyme 来查找命名空间的子组件？

【问题讨论】：

标签： javascript namespaces jestjs react-bootstrap enzyme

【解决方案1】：

可以将非名称空间组件标识为find 方法的参数，既可以是变量（例如OtherComponent），也可以是字符串（例如'OtherComponent'），但命名空间组件只能被识别为变量（例如Namespace.Component），但不能被识别为字符串（例如，不能被识别为'Namespace.Component'）。即：

it('should find a non-name-spaced component as a variable', () => {
  expect(modal.find(OtherComponent)).toHaveLength(1); // passes
});

it('should find a non-name-spaced component as a string', () => {
  expect(modal.find('OtherComponent')).toHaveLength(1); // passes
});

it('should find a name-spaced component as a variable', () => {
  expect(modal.find(Modal.Heading)).toHaveLength(1); // passes
});

it('should (not) find a name-spaced component as a string', () => {
  expect(modal.find('Modal.Heading')).toHaveLength(1); // fails
});

【讨论】：

【解决方案2】：

我遇到了同样的问题，我通过在查找功能中使用“ModalHeader”或“ModalTitle”找到了我的问题。所以我有expect(modal.find('ModalTitle')).toBe(true);

当它在控制台中显示传递给期望的对象时，我偶然发现了这一点。这是输出：

Expected value to have length:
  1
Received:      {"complexSelector": {"buildPredicate": [Function buildPredicate], "childrenOfNode": [Function childrenOfNode], "findWhereUnwrapped": [Function findWhereUnwrapped]}, "length": 0, "node": undefined, "nodes": Array [], "options": {}, "renderer": null, "root": {"complexSelector": {"buildPredicate": [Function buildPredicate], "childrenOfNode": [Function childrenOfNode], "findWhereUnwrapped": [Function findWhereUnwrapped]}, "length": 1, "node": <div className="static-modal"><Modal animation={true} autoFocus={true} backdrop={true} bsClass="modal" className="modal" dialogComponentClass={[Function ModalDialog]} enforceFocus={true} keyboard={true} manager={{"add": [Function anonymous], "containers": Array [],"data": Array [], "handleContainerOverflow": true, "hideSiblingNodes": true, "isTopModal": [Function anonymous], "modals": Array [], "remove":[Function anonymous]}} onHide={[Function onHide]} renderBackdrop={[Function renderBackdrop]} restoreFocus={true} show={false}>**<ModalHeader bsClass="modal-header" closeButton={false} closeLabel="Close">**

我正在查看它，我看到了 ModalHeader，我知道这就是我必须寻找的。为了显示我必须使用toHaveLength(1) 的对象，当它是.exists()).toBe(true) 时它不会显示，并且在我调用expect(modal .find()) 在变量上。所以我有；

let modal = shallow(<ModalInstance title={props.title.delete}/>) 首先，然后通过阅读这篇文章，我看到你有
let modal = shallow(<ModalInstance title={props.title.delete}/>).find('Modal')，当我打电话给expect(modal.find('Title')).toHaveLength(1) 时，它就显示了错误消息。

【讨论】：