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
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
470
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
780
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
効率的な開発手段として VRTを活用する
ishkawa
0
140
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
120
Hack Claude Code with Claude Code
choplin
4
2k
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
130
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
52
33k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
BBQ
matthewcrist
89
9.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Music & Morning Musume
bryan
46
6.6k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Adopting Sorbet at Scale
ufuk
77
9.5k
Producing Creativity
orderedlist
PRO
346
40k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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