feat: jest-puppeteer example (#4163)

* feat: jest-puppeteer example

* - Refactor test

* - lint

* - lint

* - eslint-disable no-undef

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/)

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
+  }
+}

examples/jest-puppeteer/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  verbose: true,
+  preset: 'jest-puppeteer'
+}

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"
+  }
+}

examples/jest-puppeteer/pages/about.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <p id="hello-msg">Hi from {{ name }}</p>
+    <nuxt-link to="/">Home page</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData() {
+    return {
+      name: process.static ? 'static' : (process.server ? 'server' : 'client')
+    }
+  },
+  head: {
+    title: 'About page'
+  }
+}
+</script>

examples/jest-puppeteer/pages/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1>Welcome!</h1>
+    <nuxt-link id="about-link" to="/about">About page</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  head: {
+    title: 'Home page'
+  }
+}
+</script>

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"`;

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')
+  })
+})