search

thien-do / moai

A React component library, where buttons look like buttons🗿
https://moai.thien.do
127 stars 26 forks source link

fix(test): Use userEvent and refactor tests #268

Closed rovn208 closed 3 years ago

rovn208 commented 3 years ago

CHANGES

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/makeinvietnam/moai-docs/qv2QbHnWLfLyjxUhH77LgLjkMLLh
✅ Preview: https://moai-docs-git-fork-ngocro208-test-setup-env-makeinvietnam.vercel.app

lqt93 commented 3 years ago

Hi @ngocro208 , could you please explain why we should use userEvent instead of fireEvent? And why you setup like you did in 'test/jest.config.js'?

rovn208 commented 3 years ago

Hi @lqt93, @testing-library/user-event is a package that is built on top of fireEvent but it's provides some methods that simulate the user interactions more closely. For example: 

fireEvent.change(input, {target: {value: 'Hello'}})

vs

userEvent.type(input, 'Hello')

Fact that React-testing-library also recommend to using userEvent instead of fireEvent since fireEvent isn't exactly how the user interacts with your application, but it's close enough for most scenarios.

For other interactions you may want to either consider using user-event or testing your components in a real environment (e.g. manually, automatic with cypress, etc.).