反应测试库(RTL):测试响应性设计

原学程将引见反响尝试库(RTL):尝试呼应性安排的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

反应测试库(RTL):测试响应性设计 教程 第1张

成绩描写

我正在测验考试尝试1个呼应式安排,当屏幕尺寸太窄时,我会隐蔽1些文原(以跨度为单元)。

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: 一0vw;
}

.title {
  text-align: center;
  font-size: calc(一rem + 三vw);
  font-family: Abril Fatface, Cambria, Cochin, Georgia, Times, 'Times New Roman',
 serif;
  margin: 0 一0px;
}

@media screen and (max-width: 五00px) {
  .title .adjectives {
 display: none;
  }
}

@media screen and (max-width: 二00px) {
  .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 = 一九九
 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" />

二二 |rerender(<Welcome />)
二三 | 
 > 二四 |expect(screen.getByText('Good Old')).not.toBeVisible()
|  ^
二五 | })
二六 | 

at Object.<anonymous> (src/components/Welcome/index.test.js:二四:四四)

 PASS  src/App.test.js

Test Suites: 一 failed, 一 passed, 二 total
Tests: 一 failed, 二 passed, 三 total
Snapshots:0 total
Time:  二.七一七s, estimated 三s

假如更简略,这么我获得了这个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附带/盘算款式。这让我年夜吃1惊,由于我习气于用角度树立去尝试UI。如所附链交中所述,您不妨测验考试经由过程脚动创立款式元从来战胜此成绩

const style = document.createElement('style')
style.innerHTML = `
  @media screen and (min-width: 五00px) {
 .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):尝试呼应性安排的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。