Сложность, моделирующая события для юнит-тестирования в Jest / Enzyme / ReactTS с сторонними контролями - PullRequest
0 голосов
/ 05 июля 2018

Я использую элементы управления BlueprintJS в своих элементах управления React, и одним из них является элемент управления Blueprint Select. Что мне нужно сделать, так это смоделировать изменение значения в раскрывающемся списке, точно так же, как я мог бы сделать это с помощью стандартного выбора HTML, однако, поскольку это отдельный сторонний элемент управления, я не знаю, как имитировать это событие.

Я вставил шаблон вывода для элемента управления ниже, но если я пытаюсь смоделировать выбранный или измененный элемент, он говорит, что не может имитировать эти события.

Есть идеи, как я могу смоделировать это с помощью Enzyme / Jest?

<Blueprint2.Select
          disabled={false}
          filterable={false}
          itemRenderer={[Function]}
          items={
            Array [
              "JK",
              "User1",
              "User2",
            ]
          }
          onItemSelect={[MockFunction]}
        >
          <Blueprint2.QueryList
            disabled={false}
            itemRenderer={[Function]}
            items={
              Array [
                "JK",
                "User1",
                "User2",
              ]
            }
            onActiveItemChange={[Function]}
            onItemSelect={[Function]}
            query=""
            renderer={[Function]}
          >
            <Blueprint2.Popover
              autoFocus={false}
              className=""
              defaultIsOpen={false}
              disabled={false}
              enforceFocus={false}
              hasBackdrop={false}
              hoverCloseDelay={300}
              hoverOpenDelay={150}
              inheritDarkTheme={true}
              interactionKind="click"
              isOpen={false}
              minimal={false}
              modifiers={Object {}}
              onInteraction={[Function]}
              openOnTargetFocus={true}
              popoverClassName="pt-select-popover"
              popoverDidOpen={[Function]}
              popoverWillClose={[Function]}
              popoverWillOpen={[Function]}
              position="bottom-left"
              rootElementTag="span"
              targetElementTag="div"
              transitionDuration={300}
              usePortal={true}
            >
              <Manager
                className="pt-popover-wrapper"
                tag="span"
              >
                <span
                  className="pt-popover-wrapper"
                >
                  <Target
                    className="pt-popover-target"
                    component="div"
                    innerRef={[Function]}
                    onClick={[Function]}
                  >
                    <div
                      className="pt-popover-target"
                      onClick={[Function]}
                    >
                      <div
                        className=""
                        key=".0"
                        onKeyDown={[Function]}
                      >
                        JK
                      </div>
                    </div>
                  </Target>
                  <Blueprint2.Overlay
                    autoFocus={false}
                    backdropClassName="pt-popover-backdrop"
                    backdropProps={Object {}}
                    canEscapeKeyClose={true}
                    canOutsideClickClose={true}
                    didOpen={[Function]}
                    enforceFocus={false}
                    hasBackdrop={false}
                    isOpen={false}
                    lazy={true}
                    onClose={[Function]}
                    transitionDuration={300}
                    transitionName="pt-popover"
                    usePortal={true}
                  />
                </span>
              </Manager>
            </Blueprint2.Popover>
          </Blueprint2.QueryList>
        </Blueprint2.Select>

1 Ответ

0 голосов
/ 06 июля 2018

Для тех, кто пытается сделать что-то подобное

В конце концов, я использовал реквизит компонента Blueprint для доступа к функции onItemSelect (). Код ниже

const pb = wrapper.find("Select").first();
    expect(pb.exists()).toBeTruthy();
    const props = pb.props() as any;
    props.onItemSelect("User2");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...