-
- {statusCode ?
{statusCode}
: null}
-
-
{title}.
+ return (
+
+
+
+
+ {statusCode}: {title}
+
+
+
+
+ {statusCode ?
{statusCode}
: null}
+
+
{title}.
+
-
+ )
}
}
@@ -43,7 +52,8 @@ const styles = {
error: {
color: '#000',
background: '#fff',
- fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
+ fontFamily:
+ '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
height: '100vh',
textAlign: 'center',
display: 'flex',
diff --git a/test/integration/client-404/next.config.js b/test/integration/client-404/next.config.js
new file mode 100644
index 00000000..35dcf0f6
--- /dev/null
+++ b/test/integration/client-404/next.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ onDemandEntries: {
+ // Make sure entries are not getting disposed.
+ maxInactiveAge: 1000 * 60 * 60
+ }
+}
diff --git a/test/integration/client-404/pages/_error.js b/test/integration/client-404/pages/_error.js
new file mode 100644
index 00000000..3cb47566
--- /dev/null
+++ b/test/integration/client-404/pages/_error.js
@@ -0,0 +1,23 @@
+import Link from 'next/link'
+import NextError from 'next/error'
+import React from 'react'
+
+export default class Error extends React.Component {
+ static getInitialProps (ctx) {
+ const { statusCode } = NextError.getInitialProps(ctx)
+ return { statusCode: statusCode || null }
+ }
+
+ render () {
+ return (
+
+
{this.props.statusCode || 'unknown'}
+
+
+ go home
+
+
+
+ )
+ }
+}
diff --git a/test/integration/client-404/pages/index.js b/test/integration/client-404/pages/index.js
new file mode 100644
index 00000000..8b697d5e
--- /dev/null
+++ b/test/integration/client-404/pages/index.js
@@ -0,0 +1 @@
+export default () =>
OK
diff --git a/test/integration/client-404/test/client-navigation.js b/test/integration/client-404/test/client-navigation.js
new file mode 100644
index 00000000..d674c35d
--- /dev/null
+++ b/test/integration/client-404/test/client-navigation.js
@@ -0,0 +1,27 @@
+/* eslint-env jest */
+
+import webdriver from 'next-webdriver'
+
+export default (context) => {
+ describe('Client Navigation 404', () => {
+ describe('should show 404 upon client replacestate', () => {
+ it('should navigate the page', async () => {
+ const browser = await webdriver(context.appPort, '/asd')
+ const serverCode = await browser
+ .waitForElementByCss('#errorStatusCode')
+ .text()
+ await browser.waitForElementByCss('#errorGoHome').click()
+ await browser.waitForElementByCss('#hellom8').back()
+ const clientCode = await browser
+ .waitForElementByCss('#errorStatusCode')
+ .text()
+
+ expect({ serverCode, clientCode }).toMatchObject({
+ serverCode: '404',
+ clientCode: '404'
+ })
+ browser.close()
+ })
+ })
+ })
+}
diff --git a/test/integration/client-404/test/index.test.js b/test/integration/client-404/test/index.test.js
new file mode 100644
index 00000000..3fc383c4
--- /dev/null
+++ b/test/integration/client-404/test/index.test.js
@@ -0,0 +1,23 @@
+/* eslint-env jest */
+/* global jasmine */
+import { join } from 'path'
+import { renderViaHTTP, findPort, launchApp, killApp } from 'next-test-utils'
+
+// test suite
+import clientNavigation from './client-navigation'
+
+const context = {}
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 5
+
+describe('Client 404', () => {
+ beforeAll(async () => {
+ context.appPort = await findPort()
+ context.server = await launchApp(join(__dirname, '../'), context.appPort)
+
+ // pre-build page at the start
+ await renderViaHTTP(context.appPort, '/')
+ })
+ afterAll(() => killApp(context.server))
+
+ clientNavigation(context, (p, q) => renderViaHTTP(context.appPort, p, q))
+})