差異處
這裏顯示兩個版本的差異處。
| Both sides previous revision 前次修改 下次修改 | 前次修改 | ||
|
web:reactjs:test:teststaticmethod [2019/03/10 17:11] tony [How to?] |
web:reactjs:test:teststaticmethod [2023/06/25 09:48] (目前版本) |
||
|---|---|---|---|
| 行 1: | 行 1: | ||
| + | {{tag>reactjs}} | ||
| ====== React - How to test component with static method? ====== | ====== React - How to test component with static method? ====== | ||
| ===== Problem ===== | ===== Problem ===== | ||
| 行 57: | 行 58: | ||
| Auth.signOut = auth_do_nothing.bind(Auth); | Auth.signOut = auth_do_nothing.bind(Auth); | ||
| </code> | </code> | ||
| - | 但這寫法存在restore的問題，會將狀態延續至下一個testcase中；因此本篇文章將分享透過[[https://sinonjs.org/releases/latest/|Sinon]]去mock static method並且清除mock狀態的做法。 | + | 但這寫法存在會將狀態延續至下一個testcase中(testsuite似乎沒影響)；因此本篇文章將分享透過[[https://sinonjs.org/releases/latest/|Sinon]]去mock static method並且清除mock狀態的做法。 |
| ===== How to? ===== | ===== How to? ===== | ||
| - | 以Problem中的Logout為例，我想要模擬使用者點擊Logout並透過Auth.signOut執行登出動作，完整的測試程式碼如下: | + | 以Logout為例，我想要模擬使用者點擊Logout並透過Auth.signOut執行登出動作，完整的測試程式碼如下: |
| <code javascript> | <code javascript> | ||
| import Logout from '../Logout' | import Logout from '../Logout' | ||
| 行 101: | 行 102: | ||
| }); | }); | ||
| </code> | </code> | ||
| - | 在test beforeEach中，我透過sinon.stub去模擬Auth.signOut doNothing的動作，即不給予任何的動作；而在afterEach中，我可以透過stub產生的instance去做restore的動作，讓原本Auth.signOut回復到模擬之前: | + | 在test beforeEach中，我透過sinon.stub去模擬Auth.signOut doNothing的動作，即不給予任何的動作；而在afterEach中，我可以透過stub產生的instance去做restore的動作，讓Auth.signOut回復到模擬之前: |
| <code javascript> | <code javascript> | ||
| let stubSignOut; | let stubSignOut; | ||
| 行 116: | 行 117: | ||
| expect(stubSignOut.called).toBe(true); | expect(stubSignOut.called).toBe(true); | ||
| </code> | </code> | ||
| - | 假如我是在Login form中想要模擬登入失敗的情形呢? 假如我一樣用signOut當範例，我可以在stubSignOut instance上指定要拋出怎樣的例外: | + | 假如我是在Login form中想要模擬登入失敗的情形呢? 這裡我一樣用signOut當範例，我可以在stubSignOut instance上指定要拋出怎樣的例外: |
| <code javascript> | <code javascript> | ||
| it('Test stub with throw', ()=> { | it('Test stub with throw', ()=> { | ||
| 行 130: | 行 131: | ||
| }); | }); | ||
| </code> | </code> | ||
| - | 假如我要模擬的是回傳值，可以透過以下方式: | + | 如果是要用回傳值的方式，則可以透過以下方式: |
| <code javascript> | <code javascript> | ||
| it('Test stub with return value', ()=> { | it('Test stub with return value', ()=> { | ||
| 行 138: | 行 139: | ||
| }); | }); | ||
| </code> | </code> | ||
| - | 假如我要模擬有帶參數的情況呢? 以login失敗為例，可以使用withArgs來達到這個需求: | + | 假如我要模擬像signIn有帶參數的情況呢? 以login失敗為例，可以使用withArgs來達到這個需求: |
| <code javascript> | <code javascript> | ||
| it('Test stub with arguments', ()=> { | it('Test stub with arguments', ()=> { | ||
| 行 152: | 行 153: | ||
| }); | }); | ||
| </code> | </code> | ||
| + | 可以看到sinon stub可以滿足我們基本的需求，而且使用也相當容易。我唯一在意的是它stub方式，需要將method name傳遞進去；假如以後有rename的需求，這會不容易馬上察覺。針對這個問題，如果之後有看到其它方法，會再分享給各位。 | ||
| ===== Reference ===== | ===== Reference ===== | ||
| * [[https://sinonjs.org/releases/v7.2.7/stubs/|Stubs - Sinon.JS]] | * [[https://sinonjs.org/releases/v7.2.7/stubs/|Stubs - Sinon.JS]] | ||
| * [[https://www.robinwieruch.de/react-fetching-data/|How to fetch data in React?]] | * [[https://www.robinwieruch.de/react-fetching-data/|How to fetch data in React?]] | ||
| + | ===== ===== | ||
| + | ---- | ||
| + | \\ | ||
| + | ~~DISQUS~~ | ||
