<h1 dir="auto">Examples bug report</h1>
<h2 dir="auto">Example name</h2>
<p dir="auto">with-ant-design</p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">component can't navigate to previous one when refresh browser</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">1, create <code class="notranslate">about.js</code> in pages folder, with code below</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react'
import Link from 'next/link'

export default () =&gt; {
  return (
    &lt;div style={{ marginTop: 100 }}&gt;
      &lt;div&gt;
        &lt;Link href=&quot;/&quot;&gt;
          &lt;a&gt;index page&lt;/a&gt;
        &lt;/Link&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-v">Link</span> <span class="pl-k">from</span> <span class="pl-s">'next/link'</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">marginTop</span>: <span class="pl-c1">100</span> <span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/"</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>index page<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Link</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">2, add a <code class="notranslate">Link</code> in <code class="notranslate">index.js</code>, such as:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" &lt;Link href=&quot;/about&quot;&gt;
      &lt;a&gt;about page&lt;/a&gt;
  &lt;/Link&gt;"><pre class="notranslate"> <span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/about"</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>about page<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Link</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">3, click link in <code class="notranslate">index.js</code> then it navigates to<code class="notranslate">/about</code> as expected<br>
4, click link in <code class="notranslate">about.js</code> then it navigates to<code class="notranslate">/</code> as expected<br>
5, click link in <code class="notranslate">index.js</code> again then it navigates to <code class="notranslate">/about</code> again<br>
6, refresh the browser<br>
7, click link in <code class="notranslate">about.js</code>, it can't navigate to<code class="notranslate">/</code> !</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">click link in <code class="notranslate">about.js</code>, it can navigate to<code class="notranslate">/</code> after refresh browser</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto">nope</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macos mojave</li>
<li>Browser chrome latest</li>
<li>Version of Next.js: latest</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">no errors in browser console or terminal console</p>
<p dir="auto">I'm encountering a weird issue with either Babel or Next.js when trying to run TypeScript jest tests.</p>
<p dir="auto">I can run the Jest test written in plain ol' JavaScript just fine, but the Footer.test.tsx file fails with an unexpected token import message:<br>
`</p>
<p dir="auto">PASS  ./demo.test.js<br>
FAIL  components/Layout/Footer/Footer.test.tsx<br>
● Test suite failed to run</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/Users/rob/repos/crypto-insights/src/web/components/Layout/Footer/Footer.test.tsx:3
import { shallow } from 'enzyme'
^^^^^^

SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)"><pre class="notranslate"><code class="notranslate">/Users/rob/repos/crypto-insights/src/web/components/Layout/Footer/Footer.test.tsx:3
import { shallow } from 'enzyme'
^^^^^^

SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
</code></pre></div>
<p dir="auto">`</p>
<p dir="auto">Using the Next.js examples with-jest and with-typescript, I've got the following configuration in place:<br>
<code class="notranslate">// tsconfig.json { "compilerOptions": { "jsx": "react-native", "module": "commonjs", "strict": true, "target": "es2017" } } </code></p>
<p dir="auto"><code class="notranslate">// .babelrc { "env": { "development": { "presets": ["next/babel"] }, "production": { "presets": ["next/babel"] }, "test": { "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]] } } } </code></p>
<p dir="auto"><code class="notranslate">// jest.config.js module.exports = { setupFiles: ['&lt;rootDir&gt;/jest.setup.js'], testPathIgnorePatterns: ['&lt;rootDir&gt;/.next/', '&lt;rootDir&gt;/node_modules/'], testRegex: '\\.test\\.*', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], collectCoverageFrom: [ '!jest.setup.js', '**/*.{js,jsx,ts,tsx}', '!build/**', '!coverage/**' ] } </code></p>
<p dir="auto">`// jest.setup.js<br>
import { configure } from 'enzyme'<br>
import Adapter from 'enzyme-adapter-react-16'</p>
<p dir="auto">configure({ adapter: new Adapter() })</p>
<p dir="auto">`</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Shouldn't I be able to run my jest test written in TSX:<br>
`// Footer.test.tsx<br>
import { shallow } from 'enzyme'<br>
import { Footer } from './Footer'</p>
<p dir="auto">describe('Footer', () =&gt; {<br>
it('should render', () =&gt; {<br>
const wrapper = shallow(</p>)<br>
expect(wrapper).toBeDefined()<br>
})<br>
})<br>
`<p dir="auto"></p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">I can run the Jest test written in plain ol' JavaScript just fine, but the Footer.test.tsx file fails with an unexpected token import message:<br>
`</p>
<p dir="auto">PASS  ./demo.test.js<br>
FAIL  components/Layout/Footer/Footer.test.tsx<br>
● Test suite failed to run</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/Users/rob/repos/crypto-insights/src/web/components/Layout/Footer/Footer.test.tsx:3
import { shallow } from 'enzyme'
^^^^^^

SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)"><pre class="notranslate"><code class="notranslate">/Users/rob/repos/crypto-insights/src/web/components/Layout/Footer/Footer.test.tsx:3
import { shallow } from 'enzyme'
^^^^^^

SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
</code></pre></div>
<p dir="auto">`</p>
<p dir="auto">Any help would be appreciated. Thanks!!</p>