Popover component causes error in jest test

[kateschwarz]

Hi team! I was just testing out the Paste Popover component and ran into an error when running a jest test. I am not setting any font sizes in my component.

 FAIL  src/App.test.tsx
  ✕ renders test text (19ms)
  ● renders test text
    TypeError: Cannot read property 'fontSize70' of undefined
      4 |
      5 | test("renders test text", () => {
    > 6 |   const { getByText } = render(<App />);
        |                         ^
      7 |   const headerElement = getByText(/Test/i);
      8 |   expect(headerElement).toBeInTheDocument();
      9 | });
      at PopoverArrow (node_modules/@twilio-paste/popover/dist/index.js:1:2510)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14803:18)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17482:13)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:18596:16)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:237:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:292:31)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23203:7)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22157:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22130:22)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:21756:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21188:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:24373:3)
      at node_modules/react-dom/cjs/react-dom.development.js:24758:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:21903:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:24757:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:24840:10)
      at node_modules/@testing-library/react/dist/pure.js:86:25
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21856:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
      at render (node_modules/@testing-library/react/dist/pure.js:82:26)
      at Object.<anonymous> (src/App.test.tsx:6:25)

For context, this is my component:

import React from "react";
import { Text } from "@twilio-paste/core";
import {
  PopoverButton,
  Popover,
  PopoverContainer,
} from "@twilio-paste/popover";

export default () => (
  <PopoverContainer baseId="popover-example">
    <PopoverButton variant="primary">Action</PopoverButton>
    <Popover aria-label="Popover">
      <Text as="span">Test</Text>
    </Popover>
  </PopoverContainer>
);

[SiTaggart]

Hi @kateschwarz, are you wrapping your test content inside the Theme.Provider? That's the only thing I can think of off the top of my head

[kateschwarz]

I wrapped the test content in the Theme.Provider and added a mock for window.matchMedia and now tests are passing. Thanks 👍