dev-resources.site
for different kinds of informations.
How to simulate clicking a button in Testing Library
Published at
8/13/2021
Categories
testinglibrary
react
Author
cuimingda
Author
9 person written this
cuimingda
open
引入user-event
import userEvent from '@testing-library/user-event'
锁定一个按钮,直接触发click
事件
const { queryByTestId } = render(<App />);
const increaseButton = queryByTestId('increase-button');
userEvent.click(increaseButton)
触发以后,就可以测试点击以后的效果了,比如在这个例子里,点击了+1按钮,结果区域就会数值上加1。
const result = queryByTestId('result');
expect(result.textContent).toBe('1');
对应的按钮
// JavaScript
const [result, setResult] = useState(0);
// HTML
<button data-testid="increase-button" onClick={() => setResult(result+1)}>+1</button>
References
testinglibrary Article's
18 articles in total
Integration Testing in React: Best Practices with Testing Library
read article
Unit Tests for Frontend Developers [Part 2]
read article
Testes unitários em React com Jest e testing library
read article
Unit tests in React with Jest and Testing Library
read article
Setup Jest, Babel e testing library para testes unitários em React
read article
Setup Jest, Babel and testing library for unit testing in React
read article
How To Setup Cypress Testing Library? A Smarter Way To Select Elements.
read article
Testing Library - Queries
read article
Configurando o Jest e Testing Library no Vite
read article
Getting Started with Redux and Testing Library
read article
How to test whether a specific button is included in the document
read article
Test Driven Development with Svelte - Querying Elements
read article
How to query element by className in Testing Library
read article
How to simulate clicking a button in Testing Library
currently reading
Test Driven Development with Svelte - Setup
read article
Testes em React Native com Jest e Testing Library, Configurando o ambiente
read article
Modern ways of UI end to end testing with Cypress
read article
Making sure you're using the correct query
read article
Featured ones: