diff --git a/examples/jest-puppeteer/README.md b/examples/jest-puppeteer/README.md new file mode 100755 index 0000000000..c26eb37d90 --- /dev/null +++ b/examples/jest-puppeteer/README.md @@ -0,0 +1,39 @@ +# Example how to test Nuxt.js app with Jest and Puppeteer + +# Install deps +``` +npm install +``` + +# Run tests +``` +npm run test +``` + +## It will +- Build app +- Run server +- Run tests + +### Output +``` + PASS test/index.spec.js + Index page + √ test index title (53ms) + √ test navigate to about page (2ms) + +Test Suites: 1 passed, 1 total +Tests: 2 passed, 2 total +Snapshots: 2 passed, 2 total +Time: 0.992s, estimated 1s +Ran all test suites. +``` + +## Check configuration files: +- `jest.config.js` +- `jest-puppeteer.config.js` + +## Documentation +- [jest-puppeteer](https://github.com/smooth-code/jest-puppeteer) +- [jest]() +- [puppeteer](https://pptr.dev/) diff --git a/examples/jest-puppeteer/jest-puppeteer.config.js b/examples/jest-puppeteer/jest-puppeteer.config.js new file mode 100755 index 0000000000..70c11b412f --- /dev/null +++ b/examples/jest-puppeteer/jest-puppeteer.config.js @@ -0,0 +1,10 @@ +module.exports = { + launch: { + headless: process.env.HEADLESS !== 'false' + }, + server: { + command: 'npm run testServer', + port: 3000, + launchTimeout: 50000 + } +} diff --git a/examples/jest-puppeteer/jest.config.js b/examples/jest-puppeteer/jest.config.js new file mode 100755 index 0000000000..77b369b61d --- /dev/null +++ b/examples/jest-puppeteer/jest.config.js @@ -0,0 +1,4 @@ +module.exports = { + verbose: true, + preset: 'jest-puppeteer' +} diff --git a/examples/jest-puppeteer/package.json b/examples/jest-puppeteer/package.json new file mode 100755 index 0000000000..82bd0e0ad3 --- /dev/null +++ b/examples/jest-puppeteer/package.json @@ -0,0 +1,18 @@ +{ + "name": "example-jest-puppeteer", + "dependencies": { + "nuxt": "latest" + }, + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "test": "jest -w=4", + "testServer": "nuxt build & nuxt start" + }, + "devDependencies": { + "jest": "latest", + "jest-puppeteer": "latest", + "puppeteer": "latest" + } +} diff --git a/examples/jest-puppeteer/pages/about.vue b/examples/jest-puppeteer/pages/about.vue new file mode 100755 index 0000000000..bc3b28766f --- /dev/null +++ b/examples/jest-puppeteer/pages/about.vue @@ -0,0 +1,19 @@ + + + diff --git a/examples/jest-puppeteer/pages/index.vue b/examples/jest-puppeteer/pages/index.vue new file mode 100755 index 0000000000..4b5f9be0d7 --- /dev/null +++ b/examples/jest-puppeteer/pages/index.vue @@ -0,0 +1,14 @@ + + + diff --git a/examples/jest-puppeteer/test/__snapshots__/index.spec.js.snap b/examples/jest-puppeteer/test/__snapshots__/index.spec.js.snap new file mode 100755 index 0000000000..7ad881e3b1 --- /dev/null +++ b/examples/jest-puppeteer/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,5 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Index page test index title: index.title 1`] = `"Home page"`; + +exports[`Index page test navigation to about page: about.msg 1`] = `"Hi from client"`; diff --git a/examples/jest-puppeteer/test/index.spec.js b/examples/jest-puppeteer/test/index.spec.js new file mode 100755 index 0000000000..00aa5f16ff --- /dev/null +++ b/examples/jest-puppeteer/test/index.spec.js @@ -0,0 +1,32 @@ +const devices = require('puppeteer/DeviceDescriptors') +const iPhone = devices['iPhone 6'] + +const BASE_URL = 'http://127.0.0.1:3000' + +describe('Index page', () => { + let page + beforeAll(async () => { + // eslint-disable-next-line no-undef + page = await browser.newPage() + await page.emulate(iPhone) + await page.goto(BASE_URL) + }) + + afterAll(async () => { + await page.close() + }) + + it('test index title', async () => { + expect.assertions(1) + const title = await page.evaluate(() => document.title) + expect(title).toMatchSnapshot('index.title') + }) + + it('test navigation to about page', async () => { + expect.assertions(1) + await page.click('a#about-link') + await page.waitForSelector('p#hello-msg') + const msg = await page.$eval('p#hello-msg', e => e.textContent) + expect(msg).toMatchSnapshot('about.msg') + }) +})