Test imports of all file types

test/e2e/app-dir/import.test.ts

@@ -0,0 +1,39 @@
+import path from 'path'
+import cheerio from 'cheerio'
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+
+describe('app dir imports', () => {
+  if (process.env.NEXT_TEST_REACT_VERSION === '^17') {
+    it('should skip for react v17', () => {})
+    return
+  }
+  let next: NextInstance
+
+  function runTests() {
+    beforeAll(async () => {
+      next = await createNext({
+        files: new FileRef(path.join(__dirname, 'import')),
+        dependencies: {
+          react: 'experimental',
+          'react-dom': 'experimental',
+          typescript: 'latest',
+          '@types/react': 'latest',
+          '@types/node': 'latest',
+        },
+      })
+    })
+    afterAll(() => next.destroy())
+
+    ;['js', 'jsx', 'ts', 'tsx'].forEach((ext) => {
+      it(`we can import all components from .${ext}`, async () => {
+        const html = await renderViaHTTP(next.url, `/${ext}`)
+        const $ = cheerio.load(html)
+        expect($('#js').text()).toBe('CompJs')
+      })
+    })
+  }
+
+  runTests()
+})

test/e2e/app-dir/import/app/js/page.js

@@ -0,0 +1,15 @@
+import CompJs from '../../components/compJs'
+import CompJsx from '../../components/compJsx'
+import CompTs from '../../components/compTs'
+import CompTsx from '../../components/compTsx'
+
+export default function Page() {
+  return (
+    <>
+      <CompJs />
+      <CompJsx />
+      <CompTs />
+      <CompTsx />
+    </>
+  )
+}

test/e2e/app-dir/import/app/jsx/page.jsx

@@ -0,0 +1,15 @@
+import CompJs from '../../components/compJs'
+import CompJsx from '../../components/compJsx'
+import CompTs from '../../components/compTs'
+import CompTsx from '../../components/compTsx'
+
+export default function Page() {
+  return (
+    <>
+      <CompJs />
+      <CompJsx />
+      <CompTs />
+      <CompTsx />
+    </>
+  )
+}

test/e2e/app-dir/import/app/layout.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}

test/e2e/app-dir/import/app/ts/page.ts

@@ -0,0 +1,14 @@
+import React from 'react'
+import CompJs from '../../components/compJs'
+import CompJsx from '../../components/compJsx'
+import CompTs from '../../components/compTs'
+import CompTsx from '../../components/compTsx'
+
+export default function Page() {
+  return React.createElement(React.Fragment, null, [
+    React.createElement(CompJs, null),
+    React.createElement(CompJsx, null),
+    React.createElement(CompTs, null),
+    React.createElement(CompTsx, null),
+  ])
+}

test/e2e/app-dir/import/app/tsx/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import CompJs from '../../components/compJs'
+import CompJsx from '../../components/compJsx'
+import CompTs from '../../components/compTs'
+import CompTsx from '../../components/compTsx'
+
+export default function Page() {
+  return (
+    <>
+      <CompJs />
+      <CompJsx />
+      <CompTs />
+      <CompTsx />
+    </>
+  )
+}

test/e2e/app-dir/import/components/compJs.js

@@ -0,0 +1,3 @@
+export default function CompJs() {
+  return <div id="js">CompJs</div>
+}

test/e2e/app-dir/import/components/compJsx.jsx

@@ -0,0 +1,3 @@
+export default function CompJsx() {
+  return <div id="jsx">CompJsx</div>
+}

test/e2e/app-dir/import/components/compTs.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function CompTs() {
+  return React.createElement('div', { id: 'ts' }, 'CompTs')
+}

test/e2e/app-dir/import/components/compTsx.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function CompTsx() {
+  return <div id="tsx">CompTsx</div>
+}

test/e2e/app-dir/import/next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  strictMode: true,
+  experimental: {
+    appDir: true,
+  },
+}