search

downshift-js / downshift

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
http://downshift-js.com/
MIT License
12.11k stars 932 forks source link

computeScrollIntoView.compute is not a function in Jest/RTL tests #1621

Closed dim882 closed 3 months ago

dim882 commented 3 months ago

Relevant code or config

const PlainDropdown: React.FC<PlainDropdownProps> = ({
  choices,
  inputStyle,
  tabIndex,
  value,
  onChange,
  placeholder,
}) => {
  // ...
  const items: Item[] = [placeholder, ...choices].map((choice) => ({
    label: choice && choice !== "" ? choice : <>&nbsp;</>,
    value: choice,
  }));
  const {
    isOpen,
    selectedItem,
    getToggleButtonProps,
    getMenuProps,
    getItemProps,
    highlightedIndex,
  } = useSelect<Item>({
    items,
    onSelectedItemChange: ({ selectedItem }) => onChange(selectedItem.value),
    itemToString: (item) =>
      item && typeof item.label === "string" ? item.label : "",
    initialSelectedItem: value,
  });

  return (
    <div>
      <button
        {...getToggleButtonProps()}
        className={classes.toggleButton}
        tabIndex={tabIndex}
      >
        {selectedItem?.label || <span>{placeholder}</span>}
        <DropdownIcon className={classes.icon} />
      </button>

      <ul
        {...getMenuProps()}
        className={cx(classes.menu, { [classes.open]: isOpen })}
      >
        {items.map((item, index) => (
          <li
            className={cx(classes.menuItem, {
              [classes.highlighted]: highlightedIndex === index,
            })}
            key={`${item.value}${index}`}
            {...getItemProps({ item, index })}
          >
            {item.label}
          </li>
        ))}
      </ul>
    </div>
  );
};

// The test
  it.only("should navigate through the options using the keyboard", () => {
    fireEvent.click(screen.getByRole("combobox"));

    fireEvent.keyDown(screen.getByRole("combobox"), { key: "ArrowDown" });
    expect(screen.getByText(choices[0])).toHaveClass("highlighted");
  });

What you did: Ran the test.

What happened: Test fails.

PlainDropdown Component › should navigate through the options using the keyboard

    TypeError: computeScrollIntoView.compute is not a function

      67 |     fireEvent.click(screen.getByRole("combobox"));
      68 |
    > 69 |     fireEvent.keyDown(screen.getByRole("combobox"), { key: "ArrowDown" });
         |               ^
      70 |     expect(screen.getByText(choices[0])).toHaveClass("highlighted");
      71 |   });
      72 |

      at scrollIntoView (node_modules/.pnpm/downshift@9.0.6_react@17.0.2/node_modules/downshift/dist/downshift.cjs.js:38:39)
      at node_modules/.pnpm/downshift@9.0.6_react@17.0.2/node_modules/downshift/dist/downshift.cjs.js:1986:7
      at commitHookEffectListMount (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:20573:26)
      at commitLifeCycles (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:20634:11)
      at commitLayoutEffects (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:23426:7)
      at HTMLUnknownElement.callCallback (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
      at invokeEventListeners (node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
      at invokeGuardedCallback (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
      at commitRootImpl (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:23151:9)
      at unstable_runWithPriority (node_modules/.pnpm/scheduler@0.20.2/node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority$1 (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
      at commitRoot (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:22990:3)
      at performSyncWorkOnRoot (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:22329:3)
      at node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:11327:26
      at unstable_runWithPriority (node_modules/.pnpm/scheduler@0.20.2/node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority$1 (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
      at flushSyncCallbackQueueImpl (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:11322:9)
      at flushSyncCallbackQueue (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:11309:3)
      at batchedUpdates$1 (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:22387:7)
      at act (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
      at Object.eventWrapper (node_modules/.pnpm/@testing-library+react@10.4.9_react-dom@17.0.2_react@17.0.2__react@17.0.2/node_modules/@testing-library/react/dist/pure.js:64:28)
      at fireEvent (node_modules/.pnpm/@testing-library+dom@7.31.2/node_modules/@testing-library/dom/dist/events.js:16:35)
      at Function.fireEvent.<computed> [as keyDown] (node_modules/.pnpm/@testing-library+dom@7.31.2/node_modules/@testing-library/dom/dist/events.js:125:36)
      at Function.keyDown (node_modules/.pnpm/@testing-library+react@10.4.9_react-dom@17.0.2_react@17.0.2__react@17.0.2/node_modules/@testing-library/react/dist/fire-event.js:18:52)
      at Object.<anonymous> (player/src/components/form/Dropdown/PlainDropdown/PlainDropdown.spec.tsx:69:15)

  console.error
    Error: Uncaught [TypeError: computeScrollIntoView.compute is not a function]
        at reportException (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at innerInvokeEventListeners (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
        at invokeEventListeners (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
        at invokeGuardedCallback (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
        at commitRootImpl (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:23151:9)
        at unstable_runWithPriority (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/scheduler@0.20.2/node_modules/scheduler/cjs/scheduler.development.js:468:12) TypeError: computeScrollIntoView.compute is not a function
        at scrollIntoView (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/downshift@9.0.6_react@17.0.2/node_modules/downshift/dist/downshift.cjs.js:38:39)
        at /Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/downshift@9.0.6_react@17.0.2/node_modules/downshift/dist/downshift.cjs.js:1986:7
        at commitHookEffectListMount (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:20573:26)
        at commitLifeCycles (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:20634:11)
        at commitLayoutEffects (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:23426:7)
        at HTMLUnknownElement.callCallback (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
        at HTMLUnknownElement.callTheUserObjectsOperation (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
        at innerInvokeEventListeners (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
        at invokeEventListeners (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
        at invokeGuardedCallback (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
        at commitRootImpl (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:23151:9)
        at unstable_runWithPriority (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/scheduler@0.20.2/node_modules/scheduler/cjs/scheduler.development.js:468:12)
        at runWithPriority$1 (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
        at commitRoot (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:22990:3)
        at performSyncWorkOnRoot (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:22329:3)
        at /Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:11327:26
        at unstable_runWithPriority (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/scheduler@0.20.2/node_modules/scheduler/cjs/scheduler.development.js:468:12)
        at runWithPriority$1 (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
        at flushSyncCallbackQueueImpl (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:11322:9)
        at flushSyncCallbackQueue (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:11309:3)
        at batchedUpdates$1 (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:22387:7)
        at act (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
        at Object.eventWrapper (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/@testing-library+react@10.4.9_react-dom@17.0.2_react@17.0.2__react@17.0.2/node_modules/@testing-library/react/dist/pure.js:64:28)
        at fireEvent (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/@testing-library+dom@7.31.2/node_modules/@testing-library/dom/dist/events.js:16:35)
        at Function.fireEvent.<computed> [as keyDown] (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/@testing-library+dom@7.31.2/node_modules/@testing-library/dom/dist/events.js:125:36)
        at Function.keyDown (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/@testing-library+react@10.4.9_react-dom@17.0.2_react@17.0.2__react@17.0.2/node_modules/@testing-library/react/dist/fire-event.js:18:52)
        at Object.<anonymous> (/Users/danimal/dev/clients/teachermade-monorepo/player/src/components/form/Dropdown/PlainDropdown/PlainDropdown.spec.tsx:69:15)
        at Object.asyncJestTest (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jest-jasmine2@26.6.3_canvas@2.11.2/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
        at /Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jest-jasmine2@26.6.3_canvas@2.11.2/node_modules/jest-jasmine2/build/queueRunner.js:45:12
        at new Promise (<anonymous>)
        at mapper (/Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jest-jasmine2@26.6.3_canvas@2.11.2/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
        at /Users/danimal/dev/clients/teachermade-monorepo/node_modules/.pnpm/jest-jasmine2@26.6.3_canvas@2.11.2/node_modules/jest-jasmine2/build/queueRunner.js:75:41
        at processTicksAndRejections (node:internal/process/task_queues:95:5)

      at VirtualConsole.<anonymous> (node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at reportException (node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
      at innerInvokeEventListeners (node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
      at invokeEventListeners (node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/.pnpm/jsdom@16.7.0_canvas@2.11.2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)

  console.error
    The above error occurred in the <PlainDropdown> component:

        at PlainDropdown (/Users/danimal/dev/clients/teachermade-monorepo/player/src/components/form/Dropdown/PlainDropdown/PlainDropdown.tsx:23:3)

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:20085:23)
      at update.callback (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:20118:5)
      at callCallback (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:12318:12)
      at commitUpdateQueue (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:12339:9)
      at commitLifeCycles (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:20736:11)
      at commitLayoutEffects (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:23426:7)
      at HTMLUnknownElement.callCallback (node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom.development.js:3945:14)

Reproduction repository:

Problem description: This seems like a simple component and a simple test to confirm that keyboard navigation works, but for some reason, it looks like the compute-scroll-into-view library isn't loaded. What am I missing here?

Suggested solution: 🤷‍♂️

silviuaavram commented 3 months ago

compute-scroll-into-view is a library used by us and it's part of our dependencies. I am not aware of your test setup, maybe it's not loading the libraries. Feel free to check that, or just mock it with jest since it's not relevant to your tests anyway.