Add eslint-plugin-jest (vercel#13003)

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "root": true,
   "parser": "babel-eslint",
-  "plugins": ["react", "react-hooks"],
+  "plugins": ["react", "react-hooks", "jest"],
   "env": {
     "browser": true,
     "commonjs": true,
@@ -21,6 +21,15 @@
     }
   },
   "overrides": [
+    {
+      "files": ["test/**/*.test.js"],
+      "extends": ["plugin:jest/recommended"],
+      "rules": {
+        "jest/expect-expect": "off",
+        "jest/no-disabled-tests": "off",
+        "jest/no-try-expect": "off"
+      }
+    },
     { "files": ["**/__tests__/**"], "env": { "jest": true } },
     {
       "files": ["**/*.ts", "**/*.tsx"],

package.json

@@ -68,6 +68,7 @@
     "cross-spawn": "6.0.5",
     "escape-string-regexp": "2.0.0",
     "eslint": "6.8.0",
+    "eslint-plugin-jest": "23.13.1",
     "eslint-plugin-react": "7.18.0",
     "eslint-plugin-react-hooks": "2.3.0",
     "execa": "2.0.3",

test/integration/404-page-custom-error/test/index.test.js

@@ -61,7 +61,7 @@ const runTests = mode => {
           )
           .then(() => true)
           .catch(() => false)
-      )
+      ).toBe(true)
     })
   }
 }

test/integration/amphtml/test/index.test.js

@@ -62,7 +62,7 @@ describe('AMP Usage', () => {
         expect(html).toMatch(/Hello World/)
 
         const $ = cheerio.load(html)
-        expect($('.abc').length === 1)
+        expect($('.abc')).toHaveLength(1)
       })
 
       it('should render the page without leaving render target', async () => {

test/integration/app-document/test/rendering.js

@@ -14,26 +14,22 @@ export default function({ app }, suiteName, render, fetch) {
     describe('_document', () => {
       test('It has a custom html class', async () => {
         const $ = await get$('/')
-        expect($('html').hasClass('test-html-props'))
+        expect($('html').hasClass('test-html-props')).toBe(true)
       })
 
       test('It has a custom body class', async () => {
         const $ = await get$('/')
-        expect($('body').hasClass('custom_class'))
+        expect($('body').hasClass('custom_class')).toBe(true)
       })
 
       test('It injects custom head tags', async () => {
         const $ = await get$('/')
-        expect(
-          $('head')
-            .text()
-            .includes('body { margin: 0 }')
-        )
+        expect($('head').text()).toMatch('body { margin: 0 }')
       })
 
       test('It passes props from Document.getInitialProps to Document', async () => {
         const $ = await get$('/')
-        expect($('#custom-property').text() === 'Hello Document')
+        expect($('#custom-property').text()).toBe('Hello Document')
       })
 
       test('It adds nonces to all scripts and preload links', async () => {

test/integration/config/test/index.test.js

@@ -3,16 +3,16 @@
 import { join } from 'path'
 import {
   renderViaHTTP,
-  fetchViaHTTP,
   findPort,
   launchApp,
   killApp,
+  File,
+  checkExpectations,
 } from 'next-test-utils'
 import fetch from 'node-fetch'
-
-// test suits
-import rendering from './rendering'
-import client from './client'
+import cheerio from 'cheerio'
+import webdriver from 'next-webdriver'
+import { readFileSync, writeFileSync } from 'fs'
 
 const context = {}
 jest.setTimeout(1000 * 60 * 5)
@@ -31,21 +31,167 @@ describe('Configuration', () => {
     ])
   })
 
+  afterAll(() => {
+    killApp(context.server)
+  })
+
+  async function get$(path, query) {
+    const html = await renderViaHTTP(context.appPort, path, query)
+    return cheerio.load(html)
+  }
+
   it('should disable X-Powered-By header support', async () => {
     const url = `http://localhost:${context.appPort}/`
     const header = (await fetch(url)).headers.get('X-Powered-By')
     expect(header).not.toBe('Next.js')
   })
 
-  afterAll(() => {
-    killApp(context.server)
+  test('renders css imports', async () => {
+    let browser
+    try {
+      browser = await webdriver(context.appPort, '/webpack-css')
+      const fontSize = await browser
+        .elementByCss('.hello-world')
+        .getComputedCss('font-size')
+      expect(fontSize).toBe('100px')
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
+
+  test('renders non-js imports from node_modules', async () => {
+    let browser
+    try {
+      browser = await webdriver(context.appPort, '/webpack-css')
+      const backgroundColor = await browser
+        .elementByCss('.hello-world')
+        .getComputedCss('background-color')
+      expect(backgroundColor).toBe('rgba(0, 0, 255, 1)')
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
+
+  test('renders server config on the server only', async () => {
+    const $ = await get$('/next-config')
+    expect($('#server-only').text()).toBe('secret')
+  })
+
+  test('renders public config on the server only', async () => {
+    const $ = await get$('/next-config')
+    expect($('#server-and-client').text()).toBe('/static')
+  })
+
+  test('renders the build id in development mode', async () => {
+    const $ = await get$('/build-id')
+    expect($('#buildId').text()).toBe('development')
   })
 
-  rendering(
-    context,
-    'Rendering via HTTP',
-    (p, q) => renderViaHTTP(context.appPort, p, q),
-    (p, q) => fetchViaHTTP(context.appPort, p, q)
-  )
-  client(context, (p, q) => renderViaHTTP(context.appPort, p, q))
+  test('correctly imports a package that defines `module` but no `main` in package.json', async () => {
+    const $ = await get$('/module-only-content')
+    expect($('#messageInAPackage').text()).toBe('OK')
+  })
+
+  it('should have config available on the client', async () => {
+    const browser = await webdriver(context.appPort, '/next-config')
+
+    const serverText = await browser.elementByCss('#server-only').text()
+    const serverClientText = await browser
+      .elementByCss('#server-and-client')
+      .text()
+    const envValue = await browser.elementByCss('#env').text()
+
+    expect(serverText).toBe('')
+    expect(serverClientText).toBe('/static')
+    expect(envValue).toBe('hello')
+    await browser.close()
+  })
+
+  it('should update css styles using hmr', async () => {
+    let browser
+    try {
+      browser = await webdriver(context.appPort, '/webpack-css')
+      const pTag = await browser.elementByCss('.hello-world')
+      const initialFontSize = await pTag.getComputedCss('font-size')
+
+      expect(initialFontSize).toBe('100px')
+
+      const pagePath = join(
+        __dirname,
+        '../',
+        'components',
+        'hello-webpack-css.css'
+      )
+
+      const originalContent = readFileSync(pagePath, 'utf8')
+      const editedContent = originalContent.replace('100px', '200px')
+
+      // Change the page
+      writeFileSync(pagePath, editedContent, 'utf8')
+
+      try {
+        await checkExpectations(async () => {
+          // Check whether the this page has reloaded or not.
+          const editedFontSize = await browser
+            .elementByCss('.hello-world')
+            .getComputedCss('font-size')
+          expect(editedFontSize).toBe('200px')
+        })
+      } finally {
+        // Finally is used so that we revert the content back to the original regardless of the test outcome
+        // restore the about page content.
+        writeFileSync(pagePath, originalContent, 'utf8')
+        await checkExpectations(async () => {
+          // This also make sure that the change is reverted when the etst ends
+          const editedFontSize = await browser
+            .elementByCss('.hello-world')
+            .getComputedCss('font-size')
+          expect(editedFontSize).toBe('100px')
+        })
+      }
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
+
+  it('should update sass styles using hmr', async () => {
+    const file = new File(
+      join(__dirname, '../', 'components', 'hello-webpack-sass.scss')
+    )
+    let browser
+    try {
+      browser = await webdriver(context.appPort, '/webpack-css')
+      expect(
+        await browser.elementByCss('.hello-world').getComputedCss('color')
+      ).toBe('rgba(255, 255, 0, 1)')
+
+      try {
+        file.replace('yellow', 'red')
+        await checkExpectations(async () => {
+          const color = await browser
+            .elementByCss('.hello-world')
+            .getComputedCss('color')
+          expect(color).toBe('rgba(255, 0, 0, 1)')
+        })
+      } finally {
+        file.restore()
+        await checkExpectations(async () => {
+          const color = await browser
+            .elementByCss('.hello-world')
+            .getComputedCss('color')
+          expect(color).toBe('rgba(255, 255, 0, 1)')
+        })
+      }
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
 })