反应测试库(RTL)：测试响应性设计 [英] React Testing Library (RTL): test a responsive design

问题描述

我正在尝试测试一个响应式设计，当屏幕尺寸太窄时，我会隐藏一些文本(以跨度为单位)。

import React from 'react'
import './index.css'

function Welcome(props) {
  return (
    <div className="container" data-testid="welcome-component">
      <span
        className="search-detective-emoji"
        role="img"
        aria-label="search emoji"
      >
        🕵️‍♀️
      </span>
      <span className="title">
        <span className="verb">Search</span>{' '}
        <span className="adjectives">Good Old</span> Flickr
      </span>
      <span
        className="search-detective-emoji"
        role="img"
        aria-label="search emoji"
      >
        🕵️‍♂️
      </span>
    </div>
  )
}

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(<Welcome />)
  const title = /flickr/i

  expect(getByText(title)).toBeInTheDocument()
})

test('renders a responsive title', () => {
  const { rerender, container } = render(<Welcome />)
  let title = /search good old flickr/i

  expect(container).toHaveTextContent(title)

  act(() => {
    window.innerWidth = 199
    fireEvent(window, new Event('resize'))
  })
  rerender(<Welcome />)

  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:
      <span class="adjectives" />

      22 |   rerender(<Welcome />)
      23 | 
    > 24 |   expect(screen.getByText('Good Old')).not.toBeVisible()
         |                                            ^
      25 | })
      26 | 

      at Object.<anonymous> (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.717s, estimated 3s

---

如果更简单，那么我得到了这个GitHub分支https://github.com/Norfeldt/flickr-code-challenge/blob/implement-css/src/components/Welcome/index.test.js 请注意，我已经注释掉了我的尝试，并且无法查看结果是否为假阳性(因为删除.not也会使测试通过)

推荐答案

TLDR；您将无法使用当前设置(JEST-DOM)测试媒体查询。

调试通过jest-dom的GitHub库后，似乎很难测试什么是响应式设计。

JEST-DOM(它使用JSDOM)库呈现组件和计算样式的方式有两个问题。

首先，它不从attached stylesheet附加/计算样式。这让我大吃一惊，因为我习惯于用角度设置来测试UI。如所附链接中所述，您可以尝试通过手动创建样式元素来克服此问题

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

或使用Helper函数as suggested in this bug。

更改后，我以为它会工作，但令我惊讶的是，它失败了！，我检查了非媒体查询样式，它完美地附加了样式，这就是我在jsdom中发现this TODO注释的时候，这是有意义的，因为媒体查询样式不起作用。

总而言之，目前不可能使用Reaction-Testing-Library测试媒体查询。我还没有检查它是否与enzyme setup一起工作，但它可能会工作，谁知道呢！

您可以使用Cypress这样的端到端测试框架。

这篇关于反应测试库(RTL)：测试响应性设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！