Angular + Jestでスナップショットテスト / Classi Angular Night 1

2019/1/31、Classi Angular Night #1にて発表した資料です。

Transcript

1. "OHVMBS
   
   +FTUͰεφοϓγϣ ο τςε τ +BO
   
   
   
   $MBTTJ
   "OHVMBS
   /JHIU
   
   
   !PLVOPLFOUBSP
2. ୭ w Ԟ໺ݡଠ࿠
   !PLVOPLFOUBSP
   w ΫϨε΢ΣΞ୅ද
   w ΞϓϦέʔγϣϯ ɾ ΤϯδχΞ
   w "OHVMBS೔ຊϢʔβʔձ
3. ΍ͬͨ͜ͱ w "OHVMBSσϕϩούʔζΨΠ υ
   w ೔ͷ τϥΠΤϥʔ͔Βੜ·Εͨେن໛ઃܭϊ΢ϋ΢
 
   'SPOUFOE
   $POGFSFODF
   'VLVPLB
   
   w ࣍ੈ୅8FCΧϯϑΝϨϯε
   8FC
   .VTJDηογϣϯ
 
   ࣍ੈ୅8FCΧϯϑΝϨϯε
4. +FTU w 'BDFCPPL੡ͷςε τϑ ϨʔϜϫʔΫ
   w IUUQTKFTUKTJP
   w ߴ଎ͳ࣮ߦͱɺ ߴ଎ͳ࠶࣮ߦ
   w ϚϧνίΞΛ׆༻ͨ͠ฒྻ࣮ߦ
   w εφοϓγϣ ο τςε τ
5. +FTUͷϝ Ϧ ο τ w +FTU
   $-*͕༏ल
   w ΢Υ ονͱ࠶࣮ߦʹؔ͢Δૢ࡞ੑ͕ͱͯ΋Α͍
   w མͪͨςε τͷΈ࠶࣮ߦ
   w ςε τͷϑΝΠϧ໊ɺ ςε τͷεϖοΫ໊ͰߜΓࠐΜͰ࣮ߦ
   w ,BSNBىಈͷ͕࣌ؒෆཁɺ ਺ඵͰऴྃ
6. KFTUQSFTFUBOHVMBS w IUUQTHJUIVCDPNUIZNJLFFKFTUQSFTFUBOHVMBS
   w "OHVMBS
   $-*ͷ࡞੒͢Δ؀ڥ͸+BTNJOF
   
   ,BSNBΛલఏͱ͍ͯ͠Δ
   w +FTUΛ࢖͏ࡍʹඞཁͳઃఆͱɺ ඞཁͳґଘؔ܎Λఏڙͯ͘͠ΕΔ
   w +BTNJOFͰਐΊ͍ͯΔҊ͔݅Β৐Γ׵͑Δࡍ͸UTDPOpHͷখࡉ޻͕ඞཁ
   w IUUQTTQFBLFSEFDLDPNPLVOPLFOUBSPOHLZPUPBOHVMBS NFFUVQ TMJEF
7. w ͜Ε͸3FBDUͷྫ
   w ྫͰ͸-JOLͱ͍͏ ίϯϙʔωϯ τ
   .jsx Λ
 react-test-rendererͱ͍͏ ϥΠ ϒϥ ϦΛܦ༝͢Δ͜ͱͰݕূ͍ͯ͠Δ εφοϓγϣ ο τςε τ import React from 'react'; import Link from '../Link.react'; import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON(); expect(tree).toMatchSnapshot(); });
8. εφοϓγϣ ο τςε τ w +FTUͷεφοϓγϣ ο τςε τͰ͸ɺ จࣈྻΛεφοϓγϣ ο τͱͯ͠อଘ͓͖ͯ͠
 ճ໨Ҏ߱ͷςε τͰॳճͷεφοϓγϣ ο τͱ࠷৽ͷ݁ՌΛൺֱ͢Δ
   w 3FBDU͚ͩͰͳ͘"OHVMBS΋ಉ༷ʹՄೳ
   w ઌʹ঺հͨ͠KFTUQSFTFUBOHVMBSͷ͓͔͛
9. εφοϓγϣ ο τςε τ w εφοϓγϣ ο τςε τͰམͪͨΒ
 ҙਤతͳมߋʹΑΔ΋ͷ͔ෆҙͷޡΓͳͷ͔ؾ͚ͮΔ
   w ҙਤతͳΒ͹εφοϓγϣ ο τଆΛߋ৽Ͱ͖Δ
   w ΨνΨνʹ݁߹ςε τΛॻ͍ͯ͠· ͏ ͱґଘͷมߋͰςε τͷमਖ਼ίε τ͕ਹΉ
   w FFΛΨνΨνʹॻ͘ ͱࠣࡉͳมߋͰ΋མͪΔ
   w εφοϓγϣ ο τςε τ͸ΏΔ ͘޿͘ ΧόʔͰ͖Δ
10. ո͍͠ڍಈ΋ʜ w <ng-container>͸ςϯϓϨʔ τ্Ͱෳ਺ͷཁૉΛ ͘ ͘ Δͷʹ࢖͑Δ
 "OHVMBS͕ఏڙ͢Δཁૉ
    w %0.ͱ ͯ͠ੜ੒͞Εͳ͍ͷͰೖΕࢠʹͯ͠΋ϓϩμΫ τʹӨڹ͠ͳ͍
    w ͸͕ͣʜ
    w +FTUͷεφοϓγϣ ο τͰ͸ۭനจࣈͱ ͯ͠ѻΘΕΔΑ ͏ Ͱ ʢόά ʁ ʣ 
 <ng-container>ͷ૿ݮͰεφοϓγϣ ο τςε τ͕མͪΔͱ͍͏໰୊͕͋Δ
 ஫ҙ
11. 5IBOL
    ZPV