User-centric TDD
with react-testing-library
Yoshihiro Nakamura@Naka_wam
Yoshihiro Nakamura
Software Engineer
2016.4 ~ Recruit Lifestyle
2019.6 ~ BCG Digital Ventures
twitter: @Naka_wam
github: @taneba
You might have read
these article before:
react-testing-library 🐐
This talk is about
- An efficient application of TDD with react that I discovered in my previous work
This talk is not about
- Explaining TDD fundamentals
- Introducing react-testing-library itself
react-testing-library
A simpler replacement for enzyme that encourages good testing practice
A QUICK PREVIEW
enzyme
- Relies on underlying implementation
- Tests might fail if you refactor code internally
react-testing-library
- Does not rely on implementation whatsoever
- Tests do not fail as long as the specification remains unchanged
- Spark joy
It's time to thank and say goodbye to enzyme 👋
react-testing-library allows us to write tests the way real user interact with the app.
🤔What if bunching up all the test case names?
Test cases in counter app
- "shows '0' as a default value"
- "counts up when user clicks the '+' button"
- "counts down when user clicks the '-' button"
🤔could be adopted in wide varieties of uses💡
Document
Todos
Evidence
etc.
User-Centric TDD
User-Centric TDD
A workflow that builds your team confidence by sharing test cases written with user-centric words with your team members
Share the test cases in every project phases
Designing Phase
-
Structure the projects and organize its components
- List the test cases as much as possible
- build your TDD Docs in a sharable fashion (static-site, spreadsheet, etc.)
- Share the test cases with your team to unify vision
🃏Jest tips (v24.x)
it.todo('name'), it.skip('name', fn), it('name', fn)
Jest CLI: --json option
- Print the test results in JSON
- Use it to build TDD Docs
Developing Phase
-
Apply TDD by replace it.todo('XXX') with it('XXX', fn)
- you can skip the test, but write why you do
- Share the progress with your team via TDD Docs
jest --json
Testing Phase
-
Share the test results with your team
- Clarify which specification is not tested enough
- Test your app manually in different browsers, devices
Bug handling Phase
-
a bug shows up🤯
- Fix the bug
- Investigate to figure out where that bug sneaked in
Project Lifecycle
Benefits
Tips
Write test cases using
common words
- DO NOT use engineering terminologies (e.g. dispatch, state, props, componentDidMount)
- Use easy words so that non-engineer members can understand
Always think what user cares
- when determine the granularity of test cases
- when decide which test to write or not
Share test cases with your team,
then you get most out of TDD✌️
TDD in front-end is fun
with react-testing-library.
Thank you
Yoshihiro Nakamura@Naka_wam
User-centric TDD with react-testing-ibrary
By Yoshihiro Nakamura
User-centric TDD with react-testing-ibrary
- 1,848