search

yocontra / react-responsive

CSS media queries in react - for responsive design, and more.
https://contra.io/react-responsive
MIT License
7.04k stars 298 forks source link

enzyme with react-responsive #258

Closed 615349 closed 4 years ago

615349 commented 4 years ago

hi

i below below snippet Code:

import { useMediaQuery } from 'react-responsive';

const FixedTabs = (props)  => {
  const isTabletOrDesktop = useMediaQuery({
    minWidth: 852
  });

  return (
    <div>
      { isTabletOrDesktop && bigTitle }
      { !isTabletOrDesktop && smallTile }
     </div>
  );
}

jest:

import { mount } from 'enzyme';
import FixedTabs from '../FixedTabs';

it('test', () => {
  let component = null;
  act(() => {
    component = mount(<FixedTabs {...props}) />
  });
  component.update();
  expect(something).toBeTruthy():
})

but then i got below error

Error: Uncaught [TypeError: mql.addListener is not a function]
        at reportException (/Users/benli/components/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (/Users/benli/components/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (/Users/benli/components/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/benli/components/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/benli/components/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/Users/benli/components/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:237:16)
        at invokeGuardedCallback (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:292:31)
        at beginWork$1 (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:23203:7)
        at performUnitOfWork (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:22157:12) TypeError: mql.addListener is not a function
        at new Mql (/Users/benli/components/node_modules/react-responsive/dist/webpack:/dist/react-responsive.js:398:9)
        at __WEBPACK_IMPORTED_MODULE_1_matchmediaquery___default (/Users/benli/components/node_modules/react-responsive/dist/webpack:/dist/react-responsive.js:434:10)
        at getMatchMedia (/Users/benli/components/node_modules/react-responsive/dist/webpack:/dist/react-responsive.js:175:12)
        at mountState (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:15222:20)
        at Object.useState (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:15767:16)
        at Object.useState (/Users/benli/components/node_modules/react/cjs/react.development.js:1497:21)
        at useMatchMedia (/Users/benli/components/node_modules/react-responsive/dist/webpack:/dist/react-responsive.js:178:72)
        at useMediaQuery (/Users/benli/components/node_modules/react-responsive/dist/webpack:/dist/react-responsive.js:221:12)
        at FixedTab (/Users/benli/components/src/components/FixedTabs/index.js:16:29)
        at renderWithHooks (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:14803:18)
        at mountIndeterminateComponent (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:17482:13)
        at beginWork (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:18596:16)
        at HTMLUnknownElement.callCallback (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:188:14)
        at invokeEventListeners (/Users/benli/components/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLUnknownElementImpl._dispatch (/Users/benli/components/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/benli/components/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/benli/components/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/Users/benli/components/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:237:16)
        at invokeGuardedCallback (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:292:31)
        at beginWork$1 (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:23203:7)
        at performUnitOfWork (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:22157:12)
        at workLoopSync (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:22130:22)
        at performSyncWorkOnRoot (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:21756:9)
        at scheduleUpdateOnFiber (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:21188:7)
        at updateContainer (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:24373:3)
        at /Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:24758:7
        at unbatchedUpdates (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:21903:12)
        at legacyRenderSubtreeIntoContainer (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:24757:5)
        at Object.render (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:24840:10)
        at fn (/Users/benli/components/node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:437:26)
        at /Users/benli/components/node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:354:37
        at batchedUpdates$1 (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:21856:12)
        at Object.act (/Users/benli/components/node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
        at wrapAct (/Users/benli/components/node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:354:13)
        at Object.render (/Users/benli/components/node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:423:16)
        at new ReactWrapper (/Users/benli/components/node_modules/enzyme/src/ReactWrapper.js:115:16)
        at mount (/Users/benli/components/node_modules/enzyme/src/mount.js:10:10)
        at /Users/benli/components/src/components/FixedTabs/__tests__/FixedTab.spec.js:27:19
        at batchedUpdates$1 (/Users/benli/components/node_modules/react-dom/cjs/react-dom.development.js:21856:12)
        at act (/Users/benli/components/node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
        at getComponent (/Users/benli/components/src/components/FixedTabs/__tests__/FixedTab.spec.js:26:5)
        at Object.<anonymous> (/Users/benli/components/src/components/FixedTabs/__tests__/FixedTab.spec.js:63:23)
        at Object.asyncJestTest (/Users/benli/components/node_modules/jest/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:100:37)
        at /Users/benli/components/node_modules/jest/node_modules/jest-jasmine2/build/queueRunner.js:47:12
        at new Promise (<anonymous>)
        at mapper (/Users/benli/components/node_modules/jest/node_modules/jest-jasmine2/build/queueRunner.js:30:19)
        at /Users/benli/components/node_modules/jest/node_modules/jest-jasmine2/build/queueRunner.js:77:41
        at processTicksAndRejections (internal/process/task_queues.js:97:5)
yocontra commented 4 years ago

You don't have a real DOM or browser - you'll want to use the device prop to set a device when doing testing outside of a browser: https://github.com/contra/react-responsive#forcing-a-device-with-the-device-prop

615349 commented 4 years ago

@contra Do i need to use the device props in the actual code? or should I use it in the jest? if the latter, can you please show one example?

thanks

yocontra commented 4 years ago

@615349 There are examples in the README: https://github.com/contra/react-responsive#testing