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.

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

1. Structure the projects and organize its components

2. List the test cases as much as possible
3. build your TDD Docs in a sharable fashion (static-site, spreadsheet, etc.)
4. 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

1. Apply TDD by replace it.todo('XXX') with it('XXX', fn)

   1. you can skip the test, but write why you do
2. Share the progress with your team via TDD Docs

jest --json

Testing Phase

1. Share the test results with your team

2. Clarify which specification is not tested enough
3. Test your app manually in different browsers, devices 

Bug handling Phase

1. a bug shows up🤯

2. Fix the bug
3. 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.