fix(nextjs): Add spec files when creating a next app (#22079)

nrwl · Mar 4, 2024 · 285a543 · 285a543
1 parent c284d3d
commit 285a543
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 16 deletions.
diff --git a/e2e/next-core/src/next-appdir.test.ts b/e2e/next-core/src/next-appdir.test.ts
@@ -35,7 +35,7 @@ describe('Next.js App Router', () => {
         import React from 'react';
         import { ${jsLib} } from '@${proj}/${jsLib}';
 
-        export default async function Page() {
+        export default function Page() {
           return (
             <p>{${jsLib}()}</p>
           );

diff --git a/packages/next/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/next/src/generators/application/__snapshots__/application.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`app --style styled-jsx should use <style jsx> in index page 1`] = `
 "'use client';
 
-export default async function Index() {
+export default function Index() {
   /*
    * Replace the elements below with your own.
    *

diff --git a/packages/next/src/generators/application/application.spec.ts b/packages/next/src/generators/application/application.spec.ts
@@ -340,7 +340,8 @@ describe('app', () => {
     });
   });
 
-  describe('--style @emotion/styled', () => {
+  // Support for emotion is still being worked on disable for now: https://nextjs.org/docs/app/building-your-application/styling/css-in-js
+  xdescribe('--style @emotion/styled', () => {
     it('should generate  @emotion/styled styles', async () => {
       const name = uniq();
 

diff --git a/packages/next/src/generators/application/files/app/page.tsx__tmpl__ b/packages/next/src/generators/application/files/app/page.tsx__tmpl__
@@ -15,7 +15,7 @@
   const StyledPage = styled.div`<%- pageStyleContent %>`;
   <% }%>
 <% } %>
-export default async function Index() {
+export default function Index() {
   /*
    * Replace the elements below with your own.
    *

diff --git a/packages/next/src/generators/application/files/common/specs/__fileName__.spec.tsx__tmpl__ b/packages/next/src/generators/application/files/common/specs/__fileName__.spec.tsx__tmpl__
@@ -1,13 +1,18 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-<% if (src) { %>
+<% if (src && !appDir) { %>
 import Index from '../src/pages/index';
-<% } else { %>
+<% } else if (!appDir) { %>
 import Index from '../pages/index';
+<% } else if (appDir && src) {%>
+import Page from '../src/app/page';
+<% } else { %>
+import Page from '../app/page';
 <% } %>
-describe('Index', () => {
+
+describe(<%- appDir ? `'Page'` : `'Index'` %>, () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<Index />);
+    const { baseElement } = render(<%- appDir ? `<Page />` : `<Index />` %>);
     expect(baseElement).toBeTruthy();
   });
 });
diff --git a/packages/next/src/generators/application/lib/create-application-files.ts b/packages/next/src/generators/application/lib/create-application-files.ts
@@ -77,14 +77,15 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
       templateVariables
     );
 
-    // RSC is not possible to unit test without extra helpers for data fetching. Leaving it to the user to figure out.
-    host.delete(
-      joinPathFragments(
-        options.appProjectRoot,
-        'specs',
-        `index.spec.${options.js ? 'jsx' : 'tsx'}`
-      )
-    );
+    if (options.unitTestRunner === 'none') {
+      host.delete(
+        joinPathFragments(
+          options.appProjectRoot,
+          'specs',
+          `index.spec.${options.js ? 'jsx' : 'tsx'}`
+        )
+      );
+    }
 
     if (options.style === 'styled-components') {
       generateFiles(