From 81a8d76d5c0a57b84e7e5bffee48a7a27f3cc908 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Thu, 10 Sep 2020 17:19:42 -0500 Subject: [PATCH] Update to check for overlay in client nav tests --- .../client-navigation/test/index.test.js | 3 +- .../client-navigation/test/rendering.js | 67 ++++++++++++------- 2 files changed, 44 insertions(+), 26 deletions(-) diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js index f3fc7c314dc7e..053bdb1e4ba51 100644 --- a/test/integration/client-navigation/test/index.test.js +++ b/test/integration/client-navigation/test/index.test.js @@ -1362,6 +1362,7 @@ describe('Client Navigation', () => { renderingSuite( (p, q) => renderViaHTTP(context.appPort, p, q), - (p, q) => fetchViaHTTP(context.appPort, p, q) + (p, q) => fetchViaHTTP(context.appPort, p, q), + context ) }) diff --git a/test/integration/client-navigation/test/rendering.js b/test/integration/client-navigation/test/rendering.js index d07faf36513e9..ba5cbef38c420 100644 --- a/test/integration/client-navigation/test/rendering.js +++ b/test/integration/client-navigation/test/rendering.js @@ -1,11 +1,13 @@ /* eslint-env jest */ import cheerio from 'cheerio' +import { getRedboxHeader, hasRedbox } from 'next-test-utils' +import webdriver from 'next-webdriver' import { BUILD_MANIFEST, REACT_LOADABLE_MANIFEST } from 'next/constants' import { join } from 'path' import url from 'url' -export default function (render, fetch) { +export default function (render, fetch, ctx) { async function get$(path, query) { const html = await render(path, query) return cheerio.load(html) @@ -215,30 +217,37 @@ export default function (render, fetch) { }) test('getInitialProps circular structure', async () => { - const $ = await get$('/circular-json-error') + const browser = await webdriver(ctx.appPort, '/circular-json-error') const expectedErrorMessage = - 'Circular structure in \\"getInitialProps\\" result of page \\"/circular-json-error\\".' - expect( - $('#__NEXT_DATA__').text().includes(expectedErrorMessage) - ).toBeTruthy() + 'Circular structure in "getInitialProps" result of page "/circular-json-error".' + + await hasRedbox(browser) + const text = await getRedboxHeader(browser) + expect(text).toContain(expectedErrorMessage) }) test('getInitialProps should be class method', async () => { - const $ = await get$('/instance-get-initial-props') + const browser = await webdriver( + ctx.appPort, + '/instance-get-initial-props' + ) + const expectedErrorMessage = - '\\"InstanceInitialPropsPage.getInitialProps()\\" is defined as an instance method - visit https://err.sh/vercel/next.js/get-initial-props-as-an-instance-method for more information.' - expect( - $('#__NEXT_DATA__').text().includes(expectedErrorMessage) - ).toBeTruthy() + '"InstanceInitialPropsPage.getInitialProps()" is defined as an instance method - visit https://err.sh/vercel/next.js/get-initial-props-as-an-instance-method for more information.' + + await hasRedbox(browser) + const text = await getRedboxHeader(browser) + expect(text).toContain(expectedErrorMessage) }) test('getInitialProps resolves to null', async () => { - const $ = await get$('/empty-get-initial-props') + const browser = await webdriver(ctx.appPort, '/empty-get-initial-props') const expectedErrorMessage = - '\\"EmptyInitialPropsPage.getInitialProps()\\" should resolve to an object. But found \\"null\\" instead.' - expect( - $('#__NEXT_DATA__').text().includes(expectedErrorMessage) - ).toBeTruthy() + '"EmptyInitialPropsPage.getInitialProps()" should resolve to an object. But found "null" instead.' + + await hasRedbox(browser) + const text = await getRedboxHeader(browser) + expect(text).toContain(expectedErrorMessage) }) test('default Content-Type', async () => { @@ -271,20 +280,25 @@ export default function (render, fetch) { }) test('default export is not a React Component', async () => { - const $ = await get$('/no-default-export') - const pre = $('#__NEXT_DATA__') - expect(pre.text()).toMatch(/The default export is not a React Component/) + const browser = await webdriver(ctx.appPort, '/no-default-export') + await hasRedbox(browser) + const text = await getRedboxHeader(browser) + expect(text).toMatch(/The default export is not a React Component/) }) test('error-inside-page', async () => { - const $ = await get$('/error-inside-page') - expect($('#__NEXT_DATA__').text()).toMatch(/This is an expected error/) + const browser = await webdriver(ctx.appPort, '/error-inside-page') + await hasRedbox(browser) + const text = await getRedboxHeader(browser) + expect(text).toMatch(/This is an expected error/) // Sourcemaps are applied by react-error-overlay, so we can't check them on SSR. }) test('error-in-the-global-scope', async () => { - const $ = await get$('/error-in-the-global-scope') - expect($('#__NEXT_DATA__').text()).toMatch(/aa is not defined/) + const browser = await webdriver(ctx.appPort, '/error-in-the-global-scope') + await hasRedbox(browser) + const text = await getRedboxHeader(browser) + expect(text).toMatch(/aa is not defined/) // Sourcemaps are applied by react-error-overlay, so we can't check them on SSR. }) @@ -394,8 +408,11 @@ export default function (render, fetch) { }) it('should show a valid error when undefined is thrown', async () => { - const $ = await get$('/throw-undefined') - expect($('body').text()).toMatch( + const browser = await webdriver(ctx.appPort, '/throw-undefined') + await hasRedbox(browser) + const text = await getRedboxHeader(browser) + + expect(text).toContain( 'An undefined error was thrown sometime during render...' ) })