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
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
330
技術同人誌をMCP Serverにしてみた
74th
1
680
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
130
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
3
160
フロントエンドのパフォーマンスチューニング
koukimiura
4
1.7k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
260
PipeCDのプラグイン化で目指すところ
warashi
1
290
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
220
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
630
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
650
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
810
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
410
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GitHub's CSS Performance
jonrohan
1031
460k
Being A Developer After 40
akosma
90
590k
Side Projects
sachag
455
42k
Facilitating Awesome Meetings
lara
54
6.5k
Transcript
Testing React components Andrei Picus
Who? andrei.picus@hootsuite.com 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