jest-puppeteerで e2eテストをやったら こうなった

ベガコーポレーション
チャンカツ
https://vega-tech.connpass.com/event/96784/

Transcript

1. jest-puppeteerͰ e2eςετΛ΍ͬͨΒ ͜͏ͳͬͨ
2. ࣗݾ঺հ • νϟϯΧπ(@tyankatsu5) • 7݄͔ΒϕΨʹ • લɿXFCσβΠφʔ
 ࠓɿϑϩϯτΤϯυΤϯδχΞ • ۀ຿Ͱ͸WVF৮ͬͯΔ
3. ݁࿦ʂ
4. Puppeteer ͠ΜͲ͍ʂʂʂ
5. ͷͰʂʂʂ
6. Cypress ࢖͓͏ʂʂʂ
7. ໨࣍ • ݁࿦ɹˡ΋͏ऴΘͬͨ • e2eςετΛ΍Δҙຯ • PuppeteerͬͯͳΜ͚ͩͬʁ • JestͬͯͳΜ͚ͩͬʁ • JestͷPuppeteerϓϦηοτΛ࢖༻͢Δ • Θ͔ͬͨ͜ͱ • CypressΛ࢖༻͢Δ • Θ͔ͬͨ͜ͱ • ࢥͬͨ͜ͱ • ΋͏Ұճ
8. e2eςετΛ΍Δҙຯ
9. – E2Eςετʹ͍ͭͯߟ͑ͯΈͨ | MMMϒϩά “Ұൠతʹ͸ɺϑϨʔϜϫʔΫΛར༻ͯ͠ ࣮ࡍͷϒϥ΢βͰͷಈ͖ΛγϛϡϨʔγϣ ϯ͢ΔΑ͏ͳςετʢதུʣϢʔβ͕࣮ ࡍʹͲ͏ૢ࡞͢Δ͔ɺͱ͍͏ࢹ఺”
10. ίϯϙʔωϯτͷػೳΛ อূ͢ΔͨΊʹ Ϣχοτςετॻ͘ import { shallowMount } from '@vue/test-utils'; import HelloWorld from '@/components/HelloWorld.vue'; describe('HelloWorld.vue', () => { it('renders props.msg when passed', () => { const msg = 'new message'; const wrapper = shallowMount(HelloWorld, { propsData: { msg } }); expect(wrapper.text()).toMatch(msg); }); });
11. ͦͷίϯϙʔωϯτΛ ϒϥ΢βͰ࣮ࡍʹૢ࡞ͯ͠ɺ Ϣʔβʔ͕։ൃऀͷظ଴௨Γͷ ૢ࡞͕Մೳͳͷ͔ςετ͢Δ
12. PuppeteerͬͯͳΜ͚ͩͬʁ
13. What’s Puppeteer •Node.jsͰHeadless ChromeΛ؆୯ʹѻ͑Δ ʢchromium͕Ұॹʹ͍ͭͯ͘Δʣ •chromiumΛDev Tools ProtocolͰ੍ޚ͢ΔAPI͕๛ ෋ •Chrome Dev Tools։ൃνʔϜϝϯόʔ͕ϝϯςφϯ εͯ͠Δ https://github.com/GoogleChrome/puppeteer#q-who-maintains- puppeteer •εΫϨΠϐϯά͕ՄೳʢͦͷԆ௕Ͱςετ΋Մೳʣ
14. Ұݟʹ೗͔ͣ https://try-puppeteer.appspot.com/
15. JestͬͯͳΜ͚ͩͬʁ
16. What’s Jest Delightful JavaScript Testing •ΦʔϧΠϯϫϯͰςετ؀ڥ༻ҙͯ͘͠ΕΔ͍͢͝΍ ͭhttps://postd.cc/a-complete-guide-to-testing-javascript-in-2017/ •Facebook੡ •vue-cli@3ͷϢχοτςετͷબ୒ࢶʹೖͬͯΔ
17. PASS ./sum.test.js ✓ adds 1 + 2 to equal 3 (5ms) // sum.js function sum(a, b) { return a + b; } module.exports = sum; // sum.test.js const sum = require('./sum'); test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); });
18. JestͷPuppeteerϓϦηοτ Λ࢖༻͢Δ
19. JestʹͰ͖ͳ͍͜ͱ •ϒϥ΢βɺ·ͨ͸ٙࣅϒϥ΢βͷ؀ڥ͕༻ҙͰ͖ͳ͍ •ނʹ+FTU͚ͩͰ͸FFςετͰ͖ͳ͍
20. ެࣜͰϓϦηοτग़ͯ͠Δ Using with puppeteer
21. vue-cli@3※Ͱ jest-puppeteer࢖ͬͯ e2eςετ΍ͬͯΈ͍ͨ ※vue-cli@3Ͱ͸Nightwatch.js,CypressΛαϙʔτ͍ͯ͠Δ
22. ΍ͬͨ ࣮ફλΠϜ
24. Θ͔ͬͨ͜ͱ
25. ͕͜͜ •ςετಉ࣮࣌ߦڧ͍ʢૣ͍ʣ •ϔουϨεϞʔυͷ੾Γସ͕͑Ͱ͖ͯศར
26. ͕͜͜ •ςετҰॠ͗ͯ͢Θ͔ΒΜʢ࣮ߦ଎౓ม͑ΒΕΔ͚Ͳ ͦ͏͡Όͳ͍ʣ •ςετॻ͍ͯΔ్தͷσόοάͮ͠Β͍ •ઃఆΊΜͲ͗͘͢͞ʢΘ͔Γʹ͍͘ʣ •εΫϨΠϐϯάπʔϧΛແཧ΍Γςετπʔϧʹঢ՚ ͤ͞Α͏ͱͨ͠ҹ৅ •΋ͬͱৄࡉͳ৘ใཉ͍͠
28. ͞Α͏ͳΒͨ͠
29. CypressΛ࢖༻͢Δ
30. What’s Cypress Fast, easy and reliable testing for anything that runs in a browser. •Cypress.io͕։ൃ •جຊແྉʢศརͳػೳ͸༗ྉʣ •ڈ೥ͷ݄͔Β044 •ςετʹಛԽͨ͠πʔϧ
31. ΍ͬͨ ࣮ફλΠϜ
33. Θ͔ͬͨ͜ͱ
34. ͕͜͜ •GUI͕࢖͍΍͍͢ •ઃఆ͕؆୯ʢWVFDMJ͕ઃఆͯ͘͠ΕͯΔͱ͸͍͑ͦΕΛൈ͔ͯ͠΋؆୯ʣ •݁Ռ͕Θ͔Γ΍͍͢ •σόοά͠΍͍͢ •CUIͰ૸ΒͤΔͱvideoࡱͬͯ͘ΕΔʢΦϑ΋Մೳʣ
35. ͕͜͜ •஗͍ʢJGSBNF࢖ͬͯΔ͔Βෳ਺࣮ߦͰ͖ͳ͍ʣ
36. ࢥͬͨ͜ͱ
37. ςετͬͯ
 ࣮֬ʹόάͷݩΛΩϟονͯ͠ ௵ͨ͢Ίʹ࢖͏΋ͷͰ͸ʁ
38. ͬͯ͜ͱ͸ৄࡉͳςετ݁Ռ ͕େࣄͳͷͰ͸ʁ
39. ΋͏Ұճ
40. Puppeteer ͠ΜͲ͍ʂʂʂ
41. ͷͰʂʂʂ
42. Cypress ࢖͓͏ʂʂʂ
43. ͓ΘΓ