Test Pyramid

Component (state, representation)

Component groups (redux / API data)

Flow of an application

Test Pyramid

Component Contract

• What it renders

Must Have:

Most Common:

• Props the component receives
• State the component holds
• What will happen when user interacts with it (click, drag, keyboard, etc)

Less Common:

• Context the component rendered in
• Method on its instance (public ref)
• Side effects

Not worth testing

• PropTypes (library handled)
• Inline-styles (change frequently)
• Library code (not our concern)

Must testing

• Child component rendering / received props
• Inline-styles changing via props (background / disabled)
• Public interface should all be tested

Rules

1. 這項測試是否重複了你原本的程式碼？如果重複了，就不需要測試（比如：inline style ，不必一個一個檢查 style 是否正確）
2. 這項測試是否已經有其他 library 幫你處理，或是為該 library 應該處理的狀況？如果是則不需要測試 （比如：propTypes）
3. 如果這項目會有 api side effect ，則必定要測