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

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

Tyankatsu
August 17, 2018

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

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

Tyankatsu

August 17, 2018
Tweet

More Decks by Tyankatsu

Other Decks in Technology

Transcript

  1. ໨࣍ • ݁࿦ɹˡ΋͏ऴΘͬͨ • e2eςετΛ΍Δҙຯ • PuppeteerͬͯͳΜ͚ͩͬʁ • JestͬͯͳΜ͚ͩͬʁ •

    JestͷPuppeteerϓϦηοτΛ࢖༻͢Δ • Θ͔ͬͨ͜ͱ • CypressΛ࢖༻͢Δ • Θ͔ͬͨ͜ͱ • ࢥͬͨ͜ͱ • ΋͏Ұճ
  2. ίϯϙʔωϯτͷػೳΛ อূ͢ΔͨΊʹ Ϣχοτςετॻ͘ 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); }); });
  3. 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 •εΫϨΠϐϯά͕ՄೳʢͦͷԆ௕Ͱςετ΋Մೳʣ
  4. 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); });
  5. What’s Cypress Fast, easy and reliable testing for anything that

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