Improve docs and tests for useMedia hook about react-media HOT 8 OPEN

Hi @edorivai you can check the third item now

from react-media.

Hey, I could work on tests for the hook. Is there anything specific that I should know of before starting?

from react-media.

@0ctothorp let me push a branch that I've been working on. Transliterating the existing tests shouldn't be difficult, but the thing that I was finding hard is that testing the SSR behavior.

from react-media.

Oh, I didn't know it was being worked on already 😅

from react-media.

I've stalled out :P I would very much appreciate the help if you're willing and able.

The big thing is that for testing SSR behavior, you want to watch three states and make sure that they're all consistent with each other:

1. the server-rendered markup
2. the first hydration pass
3. the first full render pass

In a two-pass render, you want the first two to agree, and then for the change to happen between the second and third. I'm having trouble testing this, though, because the React Testing Library doesn't really account for a desire to see the middle state and be able to compare it to the first and third states. I was working on a workaround of some sort for that when I stalled out.

from react-media.

Here's a link to the branch I've been working on:

https://github.com/tstirrat15/react-media/tree/155-testing-and-implementing-two-pass-render

And here's a link to the diff between it and current master:

https://github.com/ReactTraining/react-media/compare/master...tstirrat15:155-testing-and-implementing-two-pass-render?expand=1

It's very much a work in progress - I started writing the hydration tests by copying and pasting a bunch of existing tests, then went and started trying to solve my problem above, and I didn't get much further than that.

Tests are "passing," but that's because they're not actually capturing the desired behavior.

from react-media.

Cool, I'm going to have a look. I'm definitely not an expert in such tests, but maybe I will be able to come up with something :)

from react-media.

Awesome. Thank you so much!

from react-media.