Testing the Responsiveness of Designs using React Testing Library (RTL)

When using the React testing library, it is beneficial to write tests that mimic how users would interact with the app. Instead of inspecting attributes, it’s better to ensure that the selected component appears where it should. To achieve this, render the component that includes both the select component and the component where the selected value will be displayed as text.
In terms of using RTL, it may be challenging to check for the to=’/login’ in Link if the library mainly grabs by testid or text. However, rendering the component with the memory router wrapping it could be a solution. To do this, simply use the code provided. This approach eliminates the need to manually wrap the component with the memory router.


Question:

My objective is to evaluate a responsive layout by concealing specific text (within spans) when
screen size
becomes too narrow.

import React from 'react'
import './index.css'
function Welcome(props) {
  return (
    
️‍♀️ Search{' '} Good Old Flickr ️‍♂️
) } export default Welcome
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-detective-emoji {
  font-size: 10vw;
}
.title {
  text-align: center;
  font-size: calc(1rem + 3vw);
  font-family: Abril Fatface, Cambria, Cochin, Georgia, Times, 'Times New Roman',
    serif;
  margin: 0 10px;
}
@media screen and (max-width: 500px) {
  .title .adjectives {
    display: none;
  }
}
@media screen and (max-width: 200px) {
  .title .verb {
    display: none;
  }
}

import React from 'react'
import { render, screen, act, fireEvent } from '@testing-library/react'
import Welcome from '.'
test('renders a title', () => {
  const { getByText } = render()
  const title = /flickr/i
  expect(getByText(title)).toBeInTheDocument()
})
test('renders a responsive title', () => {
  const { rerender, container } = render()
  let title = /search good old flickr/i
  expect(container).toHaveTextContent(title)
  act(() => {
    window.innerWidth = 199
    fireEvent(window, new Event('resize'))
  })
  rerender()
  expect(screen.getByText('Good Old')).not.toBeVisible()
})
src/components/Welcome/index.test.js
  ● renders a responsive title
    expect(element).not.toBeVisible()
    Received element is visible:
      
      22 |   rerender()
      23 | 
    > 24 |   expect(screen.getByText('Good Old')).not.toBeVisible()
         |                                            ^
      25 | })
      26 | 
      at Object. (src/components/Welcome/index.test.js:24:44)
 PASS  src/App.test.js
Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 2 passed, 3 total
Snapshots:   0 total
Time:        2.****, estimated 3s

In case you find it simpler, you can refer to my GitHub branch at https://github.com/Norfeldt/
flickr-code
-challenge/blob/implement-css/src/components/Welcome/index.test.js. However, please note that I have disabled my attempt and thus it is not feasible to determine if the outcome is a false positive. Removing the

.not

will also make the test pass.


Solution:

In short, the present configuration (jest-dom) will prevent you from testing media-queries.

Upon troubleshooting and examining the Jest-DOM repository on GitHub, it appears that evaluating the responsiveness of the design may pose a significant challenge.

The manner in which the jest-dom library, which employs jsdom, renders components and computes styles is flawed.

Initially, it was unexpected that the attached stylesheet did not attach or compute styles. This was different from my experience testing UI with Angular setup. as stated in the linked resource, a potential solution to this problem is manually generating a style element.

const style = document.createElement('style')
style.innerHTML = `
  @media screen and (min-width: 500px) {
    .title .adjectives {
      display: none;
      color: red;
    }
  }
`;
document.body.appendChild(style)

Alternatively, you could utilize a helper function as proposed in the reported issue.

Following the modification, I expected the process to function properly. However, when I checked with non-
media query style
, it succeeded in attaching the style, which was a surprise to me. It was then that I came across a TODO remark in jsdom, which clarified why
media-query
styles were not functioning as expected.

In summary, currently, media-query testing cannot be done with react-testing-library. Although, I cannot confirm whether it is functional with the enzyme setup. It may be worth exploring.

One option for conducting end-to-end testing is by utilizing a framework like Cypress.

Frequently Asked Questions

Posted in Css