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
80
Testing React Components
Andrei Picus
April 28, 2015
Tweet
Share
Other Decks in Programming
See All in Programming
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Goで作る、開発・CI環境
sin392
0
260
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
Porting a visionOS App to Android XR
akkeylab
0
680
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
11
1.3k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Done Done
chrislema
184
16k
Code Reviewing Like a Champion
maltzj
524
40k
GraphQLとの向き合い方2022年版
quramy
49
14k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Invisible Side of Design
smashingmag
301
51k
Into the Great Unknown - MozCon
thekraken
40
1.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Language of Interfaces
destraynor
158
25k
Speed Design
sergeychernyshev
32
1k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Scaling GitHub
holman
460
140k
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