test environment

[loicpw]

Hi,

is there any way to init or enforce the width and height values for ReactResizeDetector when performing tests ?

I'm using create-react-app and it seems ReactResizeDetector yield undefined values when running automated tests.

Thanks.

[maslianok]

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...

[loicpw]

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).

[maslianok]

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!

[loicpw]

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...

[maslianok]

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 - https://github.com/maslianok/react-resize-detector/issues/67#issuecomment-483406542

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

[fhucko]

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.

[fhucko]

I do this currently:

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

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

[smeijer]

@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.

[fhucko]

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.