How to test “react-responsive” components with Jest and Enzyme
Tested components not only help you to create secure and flawless working projects but also the testing expertise for a developer becomes a key ability to have in the skill set. Furthermore, technology development never stops and the variety of existing devices that can be used to open webpages become huge, thus responsive development is more important than ever.
Before we jump into the test creation let’s first develop a new responsive component together. Assume we have a business customer who would like to see a quick overview of his current business KPI’s. To help him see his four KPI’s let’s create a component called <KPICard /> which can represent with the assistance of the passed down props each of the different KPI’s. The design of this component is meant to meet the demands of a mobile and web solution.
To develop our responsive component we will use a media query wrapper from the ‘react-responsive’ library. Both web and mobile view have to get defined in separate media query sections. The corresponding SCSS file can be found here.
Since we have created a good-looking and responsive component, we can finally dive into the testing of it.
To simulate the KPI card component how it is going through the unmount/mount lifecycle the mount() method from Enzyme will help us. Since the mount() method fully renders the component in the DOM, we need to specify the use case, web or mobile, that we want to test. Please keep in mind when we want to use the full DOM rendering, that we need to have a full DOM API, an environment that “looks like” a browser environment, available at the global scope. Let’s have a closer look at the mount() method, it is defined as follow.
mount(node[, options]) => ReactWrapper
As a first argument, it takes the node, so the react component, that we want to simulate. Additional options can be passed afterwards in the arguments, all these options are optional.
options.context(object): context to be passed into the componentoptions.attachTo(DOM element): DOM element to attach the component tooptions.childContextTypes(object): merged contextTypes for all children of the wrapperoptions.wrappingComponent(component type): a component that will render as a parent of the node. It can be used to provide context to the node, among other things.options.wrappingComponentProps(object): initial props to pass to the wrapping component if it is specified
In our case, the options wrapping component and wrapping component props are the needed options to specify in our test since we want to wrap out KPI card content with the media query and also pass in the media query the screen width prop.
Now let’s have a look at how the ‘react-responsive’ library suggests testing the media query nodes. They recommend importing the context as a responsive context and within the provider property, you will be able to simulate the media query node.
<ResponsiveContext.Provider value={{ width: 1000 }}>
Within this node, you can pass a value property that has the width property available to mimic different screen widths. Please be aware of the fact if the component you are testing have a device prop in use, that this one will take precedence over the one from the context.
Combining now these two pieces of information, we can set up our test file. We need to create options that get passed as a second argument into the mount() method for mobile and web. The wrapping component is the media query so we use ResponsiveContext.Provider as it is described above. The wrapping component props will be in each case the different widths.
After the setup, we can write now our test cases using the Jest matches.
Thank you for taking the time to read this article, I hope you enjoyed it. For more tips on how to test responsive components please do not hesitate to write them in the comments. Let’s close this article with the words of Confucius — “Learn as though you would never be able to master it; hold it as though you would be in fear of losing it.”.
Happy learning & happy coding!
