Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

7a505b4e9b90548d96971b37dc07e761?s=128

Tyankatsu

August 17, 2018
Tweet

More Decks by Tyankatsu

Other Decks in Technology

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. ΍ͬͨ ࣮ફλΠϜ

  23. None
  24. Θ͔ͬͨ͜ͱ

  25. ͕͜͜ •ςετಉ࣮࣌ߦڧ͍ʢૣ͍ʣ •ϔουϨεϞʔυͷ੾Γସ͕͑Ͱ͖ͯศར

  26. ͕͜͜ •ςετҰॠ͗ͯ͢Θ͔ΒΜʢ࣮ߦ଎౓ม͑ΒΕΔ͚Ͳ ͦ͏͡Όͳ͍ʣ •ςετॻ͍ͯΔ్தͷσόοάͮ͠Β͍ •ઃఆΊΜͲ͗͘͢͞ʢΘ͔Γʹ͍͘ʣ •εΫϨΠϐϯάπʔϧΛແཧ΍Γςετπʔϧʹঢ՚ ͤ͞Α͏ͱͨ͠ҹ৅ •΋ͬͱৄࡉͳ৘ใཉ͍͠

  27. None
  28. ͞Α͏ͳΒͨ͠

  29. CypressΛ࢖༻͢Δ

  30. What’s Cypress Fast, easy and reliable testing for anything that

    runs in a browser. •Cypress.io͕։ൃ •جຊແྉʢศརͳػೳ͸༗ྉʣ •ڈ೥ͷ݄͔Β044 •ςετʹಛԽͨ͠πʔϧ
  31. ΍ͬͨ ࣮ફλΠϜ

  32. None
  33. Θ͔ͬͨ͜ͱ

  34. ͕͜͜ •GUI͕࢖͍΍͍͢ •ઃఆ͕؆୯ʢWVFDMJ͕ઃఆͯ͘͠ΕͯΔͱ͸͍͑ͦΕΛൈ͔ͯ͠΋؆୯ʣ •݁Ռ͕Θ͔Γ΍͍͢ •σόοά͠΍͍͢ •CUIͰ૸ΒͤΔͱvideoࡱͬͯ͘ΕΔʢΦϑ΋Մೳʣ

  35. ͕͜͜ •஗͍ʢJGSBNF࢖ͬͯΔ͔Βෳ਺࣮ߦͰ͖ͳ͍ʣ

  36. ࢥͬͨ͜ͱ

  37. ςετͬͯ
 ࣮֬ʹόάͷݩΛΩϟονͯ͠ ௵ͨ͢Ίʹ࢖͏΋ͷͰ͸ʁ

  38. ͬͯ͜ͱ͸ৄࡉͳςετ݁Ռ ͕େࣄͳͷͰ͸ʁ

  39. ΋͏Ұճ

  40. Puppeteer ͠ΜͲ͍ʂʂʂ

  41. ͷͰʂʂʂ

  42. Cypress ࢖͓͏ʂʂʂ

  43. ͓ΘΓ