Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Testing React Components
Search
Andrei Picus
April 28, 2015
Programming
1
79
Testing React Components
Andrei Picus
April 28, 2015
Tweet
Share
Other Decks in Programming
See All in Programming
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
780
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
PipeCDのプラグイン化で目指すところ
warashi
1
270
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
Featured
See All Featured
Navigating Team Friction
lara
187
15k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Agile that works and the tools we love
rasmusluckow
329
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Why Our Code Smells
bkeepers
PRO
336
57k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Invisible Side of Design
smashingmag
301
51k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Music & Morning Musume
bryan
46
6.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Transcript
Testing React components Andrei Picus
Who?
[email protected]
github.com/NiGhTTraX Started with JS 10 years ago In
love with TDD
What? 1. How to write good unit tests. 2. How
to unit test a React component. 3. How to write the tests. 4. How to run the tests.
What’s a unit test? A test, whose result (pass or
fail) depends on the correctness of only one interesting piece of behaviour.
Testing a client-server relation Do I ask the interface the
right questions? Do I correctly handle all of the responses? Do I respond correctly to the questions? Do I try to respond to the questions? Contract C S INTERFACE Collaboration
The interface • lifecycle methods • callbacks • public methods
• DOM event handlers
Inter-component communication Do I send the correct props? C Do
I call the right callbacks? Do I react correctly to the new props? Do I implement the callback? API P
Intra-component communication Do I compute the correct state? render() Component
Do I call the right callbacks? Do I render the right things? Do I implement the callback? API
Mocking component methods Component = React.createClass({}) Component._class.prototype .__reactAutoBindMap[method] // cb
.constructor[method] // static [method] // public
Mocking component methods You need to do it on the
component’s class before rendering.
Mocking children • Mock the NodeJS module. • Have a
mixin/lib that loads a component and mock that. • Shallow render.
SinonJS sinon.spy(Component, ‘updateFoo’) sinon.stub(Component, ‘render’) .returns(null) sinon.stub(Component, ‘loadChild’) .returns(null)
sinon-chai expect(stub) .to.have.been.called.and .to.have.been.calledWith(42);
Setup a component Put it into a certain state and
then assert stuff on it. Don’t do two actions that mutate state in a single test => create another test where you load the component in the 2nd state
Running the tests Browserify (webpack doesn’t work with sinon) MochaJS
ChaiJS SinonJS Karma Istanbul
Example config NiGhTTraX/react-test-buffet
That’s all folks