React 测试库 (RTL)：测试响应式设计

Question

我正在尝试测试响应式设计，当屏幕尺寸太窄时，我会隐藏一些文本（跨度）。

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 也会使测试通过）

Answer 1

TLDR；您将无法使用当前设置 (jest-dom) 测试 media-queries。

调试并浏览 jest-dom 的 github 存储库后，似乎很难测试响应式设计。

这种方式有几个问题，jest-dom（使用 jsdom）库呈现组件并计算样式。

首先，它没有 attach/compute 来自 attached stylesheet 的样式。这让我感到惊讶，因为我习惯于使用 Angular 设置来测试 UI。如附件link中所述，您可以尝试通过手动创建样式元素来解决此问题

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

或使用辅助函数来做到这一点 as suggested in this bug。

进行此更改后，我认为它会起作用，但令我惊讶的是，它 失败了！，我检查了 non-media 查询样式，它完美地附加了样式并且那是我在 jsdom 中发现 this TODO 评论的时候，这很有意义，因为 media-query 样式不起作用。

总而言之，目前无法使用 react-testing-library 测试 media-query。我还没有检查它是否与 enzyme setup 一起工作，但谁知道呢！

您可以使用端到端测试框架，例如 Cypress。

React 测试库 (RTL)：测试响应式设计

React Testing Library (RTL): test a responsive design

css

testing

responsive-design

reactjs

react-testing-library