如何测试响应式设计？

Question

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

\n

import React from \'react\'\nimport \'./index.css\'\n\nfunction Welcome(props) {\n  return (\n    <div className="container" data-testid="welcome-component">\n      <span\n        className="search-detective-emoji"\n        role="img"\n        aria-label="search emoji"\n      >\n        \xef\xb8\x8f\xe2\x80\x8d\xe2\x99\x80\xef\xb8\x8f\n      </span>\n      <span className="title">\n        <span className="verb">Search</span>{\' \'}\n        <span className="adjectives">Good Old</span> Flickr\n      </span>\n      <span\n        className="search-detective-emoji"\n        role="img"\n        aria-label="search emoji"\n      >\n        \xef\xb8\x8f\xe2\x80\x8d\xe2\x99\x82\xef\xb8\x8f\n      </span>\n    </div>\n  )\n}\n\nexport default Welcome\n

\n

.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.search-detective-emoji {\n  font-size: 10vw;\n}\n\n.title {\n  text-align: center;\n  font-size: calc(1rem + 3vw);\n  font-family: Abril Fatface, Cambria, Cochin, Georgia, Times, \'Times New Roman\',\n    serif;\n  margin: 0 10px;\n}\n\n@media screen and (max-width: 500px) {\n  .title .adjectives {\n    display: none;\n  }\n}\n\n@media screen and (max-width: 200px) {\n  .title .verb {\n    display: none;\n  }\n}\n

\n

import React from \'react\'\nimport { render, screen, act, fireEvent } from \'@testing-library/react\'\n\nimport Welcome from \'.\'\ntest(\'renders a title\', () => {\n  const { getByText } = render(<Welcome />)\n  const title = /flickr/i\n\n  expect(getByText(title)).toBeInTheDocument()\n})\n\ntest(\'renders a responsive title\', () => {\n  const { rerender, container } = render(<Welcome />)\n  let title = /search good old flickr/i\n\n  expect(container).toHaveTextContent(title)\n\n  act(() => {\n    window.innerWidth = 199\n    fireEvent(window, new Event(\'resize\'))\n  })\n  rerender(<Welcome />)\n\n  expect(screen.getByText(\'Good Old\')).not.toBeVisible()\n})\n

\n

src/components/Welcome/index.test.js\n  \xe2\x97\x8f renders a responsive title\n\n    expect(element).not.toBeVisible()\n\n    Received element is visible:\n      <span class="adjectives" />\n\n      22 |   rerender(<Welcome />)\n      23 | \n    > 24 |   expect(screen.getByText(\'Good Old\')).not.toBeVisible()\n         |                                            ^\n      25 | })\n      26 | \n\n      at Object.<anonymous> (src/components/Welcome/index.test.js:24:44)\n\n PASS  src/App.test.js\n\nTest Suites: 1 failed, 1 passed, 2 total\nTests:       1 failed, 2 passed, 3 total\nSnapshots:   0 total\nTime:        2.717s, estimated 3s\n

\n

---

\n

如果更容易，那么我得到了这个 github 分支https://github.com/Norfeldt/flickr-code-challenge/blob/implement-css/src/components/Welcome/index.test.js \n请注意，我已注释掉我的尝试，并且不可能查看结果是否为误报（因为删除也.not会使测试通过）

\n

Answer 1

太长了；您将无法使用当前设置（jest-dom）测试媒体查询。

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

jest-dom（使用 jsdom）库渲染组件和计算样式的方式存在一些问题。

首先，它不会从附加的样式表附加/计算样式。这让我感到惊讶，因为我习惯使用 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)

或使用辅助函数按照此错误中的建议来执行此操作。

进行此更改后，我认为它会起作用，但令我惊讶的是，它失败了！，我检查了非媒体查询样式，它完美地附加了样式，就在那时我在 jsdom 中发现了这个 TODO注释，这是有道理的，因为媒体查询样式不起作用。

总而言之，目前无法使用react-testing-library 测试媒体查询。我还没有检查它是否与酶设置一起工作，但谁知道呢！

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