0

i have a footer that has a <p> element when it's greater than 576px but it's NOT rendered (display: none) if less than 576px.

Works perfect in browser.

Testing it with Jest / Enzyme is very difficult though.

I have a function:

const resizeWindow = (x, y) => {
  // @ts-ignore
  window.innerWidth = x;
  // @ts-ignore
  window.innerHeight = y;
  window.dispatchEvent(new Event('resize'));
};

This is then called in the test:

...test on desktop...

...test on mobile:-

it('should NOT show <p> tag if width < 576', () => {
   resizeWindow(300, 600);
   const numberOfPtags = mountedComponent.find('p').length;
   expect(numberOfPtags).toBe(0)
});

But it always comes through as 1.

Even though the code would make it display: none; with those dimensions.

I found a way of logging out style and it had it as display: block; which is bizarre as I've only used inline and none.

I also logged out the window.innerWidth dimensions and they came out fine, so it obviously is changing them.

What am I missing here?

-- UPDATED --

screenshot of tests showing global.innerWidth instead of window, checking the width has definitely changed, and still the

tag remains. No idea what i'm doing wrong.

Thought it might be an async issue (eg waiting for the virtual window to resize, put a setTimeout in and the expect inside it... Jest totally skipped the setTimeout all together

screeshot of code

skyboyer
  • 22,209
  • 7
  • 57
  • 64
Aid19801
  • 1,175
  • 1
  • 17
  • 30
  • window.innerWidth and innerHeight are *read only*, you can't set them like that. However there is a hack, you can see here https://www.thetopsites.net/article/59307258.shtml or if you search stackoverflow, a question/answer duplicate answering yours. – George Aug 06 '20 at 17:49
  • Does this answer your question? [Jest / Enzyme - How to test at different viewports?](https://stackoverflow.com/questions/46221210/jest-enzyme-how-to-test-at-different-viewports) – George Aug 06 '20 at 17:50
  • Have you tried [`toBeVisible()`](https://github.com/testing-library/jest-dom#tobevisible)? – Maxime Helen Aug 06 '20 at 19:19
  • @MaximeHelen using `toBeVisible()` or indeed anything from `@testing-library/jest-dom` creates a lot of `expect is not defined` or `cannot find declaration types for...` errors. I've tried adding it (as per Docs) to setup file, importing the method directly - both seem to fail. – Aid19801 Aug 07 '20 at 05:13
  • @George I put TS Ignore onto those read-only warnings and they went away. In any case, i have switched to `global.innerWidth` now and it's the same. To be clear: the width *does* change, i can log that out and see it's reduced to 300. It's the *element* that doesnt. I'm expecting

    to no longer be visible, but it remains.

     – Aid19801 Aug 07 '20 at 05:21
  • `expect` is the built-in [`jest` object](https://jestjs.io/docs/en/expect) to match many things. You need it. I would double-check the environment, maybe this [github issue](https://github.com/testing-library/jest-dom/issues/122) could give you some good leads on how to fix this. Otherwise, I would make a new post describing your setup environment (package.json, config files...) or find a duplicate on that matter – Maxime Helen Aug 07 '20 at 05:23
  • Noticed in my Jest config there's a note re styling files. "anything style related is ignored and mapped to jest-transform-stub module". So i wonder if my scss (nested) mixins are just being ignored, would explain why test app isn't behaving like real app. @MaximeHelen – Aid19801 Aug 07 '20 at 06:11
  • Just a sidenote: remember to use jest's `done()` when using `setTimeout` inside tests. – k-wasilewski Aug 07 '20 at 16:51
  • Turns out NONE of the styling was being incorporated into my unit tests, which explains by Media Queries & the Mixins applying them were not impacting the JS-DOM component. I simply don't have the time to spend days & weeks working out how to get Jest/Enzyme to respond to those - so i've begrudgingly settled for a manual test, code snapshot & the other click functionality of my footer icons. I may return to this later though, if anyone comes across a simple NextJS/SCSS way to unit test media query led functionality. – Aid19801 Aug 09 '20 at 07:24

0 Answers0