test environment about react-resize-detector HOT 9 CLOSED

Hi @loicpw
You're right, ReactResizeDetector works only in a browser environment.

What values do you expect to see?
You should probably mock the ReactResizeDetector library https://jestjs.io/docs/en/manual-mocks and create your own logic to test components, e.g. pass different values to the mock and test how your components react to these values...

from react-resize-detector.

Hi and thanks for your reply,

well this is what I'm currently doing in some tests because not everything depends on the resolution...

beforeEach(() => { 
    MediaQuery.defaultProps = {
        values: { width: 800, height: 800 },                                
    }; 
})

EDIT: And actually this is useful for testing viewport related behavior as well (mocking things is maybe more maintainable in the long run but it requires much more efforts not always worth the use case).

from react-resize-detector.

Cool!

To be honest I'm not an expert in unit testing and I didn't even know that you can set width and height using MediaQuery.
I think it can be very useful. Thanks for pointing this out!

from react-resize-detector.

Do you think you could implement something similar in ReactResizeDetector ?
I really don't know if it's a common use case, as far as I'm concerned I find this useful. Maybe I'll try to implement it by myself later on as I'm still a beginner in js and React...

from react-resize-detector.

I don't think we should add any extra logic to the library in order to reduce unit tests by 3 rows.

@loicpw you provided a beautiful solution to mock RRD width and height - #67 (comment)

I think it's the best approach to test your components with react-resize-detector.
Closing this issue.

from react-resize-detector.

For few hours now I am trying set width in my Jest test so that I do not get undefined value in my render function.
Can someone help me with clean solution for typescript?
MediaQuery is not defined, and I cannot figure out how to mock react-resize-detector, this does not work:

jest.mock("react-resize-detector", () => {
    const ComponentToMock = () => <div />;
    return ComponentToMock;
});

I am using react-test-renderer. Maybe it is impossible with that, I do not know.

from react-resize-detector.

I do this currently:

let containerWidth: number;
jest.mock("react-resize-detector", () => {
    return {
        default: props => <div>
            {props.children({ width: containerWidth })}
        </div>
    }
});

beforeEach(() => {
    containerWidth = 1000;
});

from react-resize-detector.

@Hogan, did you figure it out? I'm having the same problem. Your last snippet doesn't work for me:

    Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

from react-resize-detector.

The code I posted must be immediately after imports. I tried to wrap it in function and it did not work. I do not understand why, but I am glad it somehow works.
Oh the weirdness of JS.

from react-resize-detector.