反应测试库(RTL)：测试响应性设计
原学程将引见反响尝试库(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)：尝试呼应性安排的学程便到这里便停止了，愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野，更多技巧学程不妨在站内搜刮。
