css - React 测试库 (RTL) : test a responsive design

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) 测试媒体查询。
在调试并通过 jest-dom 的 github 存储库之后，似乎很难测试什么响应式设计。
这种方式有几个问题，jest-dom(使用 jsdom)库渲染组件并计算样式。
首先， 它不会从 attached stylesheet 附加/计算样式。这让我感到惊讶，因为我习惯于使用 Angular 设置测试 UI。如附加链接中所述，您可以尝试通过手动创建样式元素来解决此问题

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 。
在此更改之后，我认为它会起作用，但令我惊讶的是，它 FAILED! ，我检查了非媒体查询样式，它完美地附加了样式，那时我在 jsdom 中发现了 this TODO 注释，这是有道理的，因为媒体查询样式不起作用。
总而言之，目前无法使用 react-testing-library 测试媒体查询。我还没有检查它是否与 enzyme setup 一起工作，但谁知道呢!
您可以使用端到端测试框架，例如 Cypress 。