From e86ab9aa41721c8bbe5b23ab75436cf1390fbdae Mon Sep 17 00:00:00 2001
From: Daniel Choudhury <dannychoudhury@gmail.com>
Date: Mon, 21 Nov 2022 17:52:54 +0700
Subject: [PATCH] chore(generators): Refactor cell tests for performance

---
 .../__tests__/__snapshots__/cell.test.js.snap | 652 +++++++++---------
 .../generate/cell/__tests__/cell.test.js      | 624 +++++++++--------
 2 files changed, 648 insertions(+), 628 deletions(-)

diff --git a/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap b/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap
index 9e7a623e9886..105153d1c4ae 100644
--- a/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap
+++ b/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap
@@ -52,13 +52,10 @@ export const Success = ({ equipment }) => {
 "
 `;
 
-exports[`TypeScript: generates list cells if list flag passed in 1`] = `
-"import type { FindBazingaQuery, FindBazingaQueryVariables } from 'types/graphql'
-import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
-
-export const QUERY = gql\`
-  query FindBazingaQuery($id: Int!) {
-    bazinga: bazinga(id: $id) {
+exports[`Kebab case words creates a cell component with a kebabCase word name 1`] = `
+"export const QUERY = gql\`
+  query FindUserProfileQuery($id: Int!) {
+    userProfile: userProfile(id: $id) {
       id
     }
   }
@@ -68,24 +65,54 @@ export const Loading = () => <div>Loading...</div>
 
 export const Empty = () => <div>Empty</div>
 
-export const Failure = ({
-  error,
-}: CellFailureProps<FindBazingaQueryVariables>) => (
+export const Failure = ({ error }) => (
   <div style={{ color: 'red' }}>Error: {error?.message}</div>
 )
 
-export const Success = ({
-  bazinga,
-}: CellSuccessProps<FindBazingaQuery, FindBazingaQueryVariables>) => {
-  return <div>{JSON.stringify(bazinga)}</div>
+export const Success = ({ userProfile }) => {
+  return <div>{JSON.stringify(userProfile)}</div>
 }
 "
 `;
 
-exports[`TypeScript: generates list cells if list flag passed in 2`] = `
+exports[`Kebab case words creates a cell mock with a kebabCase word name 1`] = `
+"// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  userProfile: {
+    id: 42,
+  },
+})
+"
+`;
+
+exports[`Kebab case words creates a cell stories with a kebabCase word name 1`] = `
+"import { Loading, Empty, Failure, Success } from './UserProfileCell'
+import { standard } from './UserProfileCell.mock'
+
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
+}
+
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
+}
+
+export const failure = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
+}
+
+export const success = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
+}
+
+export default { title: 'Cells/UserProfileCell' }
+"
+`;
+
+exports[`Kebab case words creates a cell test with a kebabCase word name 1`] = `
 "import { render } from '@redwoodjs/testing/web'
-import { Loading, Empty, Failure, Success } from './BazingaCell'
-import { standard } from './BazingaCell.mock'
+import { Loading, Empty, Failure, Success } from './UserProfileCell'
+import { standard } from './UserProfileCell.mock'
 
 // Generated boilerplate tests do not account for all circumstances
 // and can fail without adjustments, e.g. Float and DateTime types.
@@ -93,7 +120,7 @@ import { standard } from './BazingaCell.mock'
 //        https://redwoodjs.com/docs/testing#testing-cells
 // https://redwoodjs.com/docs/testing#jest-expect-type-considerations
 
-describe('BazingaCell', () => {
+describe('UserProfileCell', () => {
   it('renders Loading successfully', () => {
     expect(() => {
       render(<Loading />)
@@ -120,175 +147,14 @@ describe('BazingaCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success bazinga={standard().bazinga} />)
+      render(<Success userProfile={standard().userProfile} />)
     }).not.toThrow()
   })
 })
 "
 `;
 
-exports[`TypeScript: generates list cells if list flag passed in 3`] = `
-"import type { ComponentStory } from '@storybook/react'
-
-import { Loading, Empty, Failure, Success } from './BazingaCell'
-import { standard } from './BazingaCell.mock'
-
-export const loading = () => {
-  return Loading ? <Loading /> : <></>
-}
-
-export const empty = () => {
-  return Empty ? <Empty /> : <></>
-}
-
-export const failure: ComponentStory<typeof Failure> = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
-}
-
-export const success: ComponentStory<typeof Success> = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : <></>
-}
-
-export default { title: 'Cells/BazingaCell' }
-"
-`;
-
-exports[`TypeScript: generates list cells if list flag passed in 4`] = `
-"// Define your own mock data here:
-export const standard = (/* vars, { ctx, req } */) => ({
-  bazinga: {
-    id: 42,
-  },
-})
-"
-`;
-
-exports[`TypeScript: generates list cells if name is plural 1`] = `
-"import type { MembersQuery } from 'types/graphql'
-import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
-
-
-export const QUERY = gql\`
-  query MembersQuery {
-    members {
-      id
-    }
-  }
-\`
-
-export const Loading = () => <div>Loading...</div>
-
-export const Empty = () => <div>Empty</div>
-
-export const Failure = ({ error }: CellFailureProps) => (
-  <div style={{ color: 'red' }}>Error: {error?.message}</div>
-)
-
-export const Success = ({ members }: CellSuccessProps<MembersQuery>) => {
-  return (
-    <ul>
-      {members.map((item) => {
-        return <li key={item.id}>{JSON.stringify(item)}</li>
-      })}
-    </ul>
-  )
-}
-"
-`;
-
-exports[`creates a cell component with a camelCase word name 1`] = `
-"export const QUERY = gql\`
-  query FindUserProfileQuery($id: Int!) {
-    userProfile: userProfile(id: $id) {
-      id
-    }
-  }
-\`
-
-export const Loading = () => <div>Loading...</div>
-
-export const Empty = () => <div>Empty</div>
-
-export const Failure = ({ error }) => (
-  <div style={{ color: 'red' }}>Error: {error?.message}</div>
-)
-
-export const Success = ({ userProfile }) => {
-  return <div>{JSON.stringify(userProfile)}</div>
-}
-"
-`;
-
-exports[`creates a cell component with a kebabCase word name 1`] = `
-"export const QUERY = gql\`
-  query FindUserProfileQuery($id: Int!) {
-    userProfile: userProfile(id: $id) {
-      id
-    }
-  }
-\`
-
-export const Loading = () => <div>Loading...</div>
-
-export const Empty = () => <div>Empty</div>
-
-export const Failure = ({ error }) => (
-  <div style={{ color: 'red' }}>Error: {error?.message}</div>
-)
-
-export const Success = ({ userProfile }) => {
-  return <div>{JSON.stringify(userProfile)}</div>
-}
-"
-`;
-
-exports[`creates a cell component with a multi word name 1`] = `
-"export const QUERY = gql\`
-  query FindUserProfileQuery($id: Int!) {
-    userProfile: userProfile(id: $id) {
-      id
-    }
-  }
-\`
-
-export const Loading = () => <div>Loading...</div>
-
-export const Empty = () => <div>Empty</div>
-
-export const Failure = ({ error }) => (
-  <div style={{ color: 'red' }}>Error: {error?.message}</div>
-)
-
-export const Success = ({ userProfile }) => {
-  return <div>{JSON.stringify(userProfile)}</div>
-}
-"
-`;
-
-exports[`creates a cell component with a single word name 1`] = `
-"export const QUERY = gql\`
-  query FindUserQuery($id: Int!) {
-    user: user(id: $id) {
-      id
-    }
-  }
-\`
-
-export const Loading = () => <div>Loading...</div>
-
-export const Empty = () => <div>Empty</div>
-
-export const Failure = ({ error }) => (
-  <div style={{ color: 'red' }}>Error: {error?.message}</div>
-)
-
-export const Success = ({ user }) => {
-  return <div>{JSON.stringify(user)}</div>
-}
-"
-`;
-
-exports[`creates a cell component with a snakeCase word name 1`] = `
+exports[`Multiword files creates a cell component with a multi word name 1`] = `
 "export const QUERY = gql\`
   query FindUserProfileQuery($id: Int!) {
     userProfile: userProfile(id: $id) {
@@ -311,7 +177,7 @@ export const Success = ({ userProfile }) => {
 "
 `;
 
-exports[`creates a cell mock with a camelCase word name 1`] = `
+exports[`Multiword files creates a cell mock with a multi word name 1`] = `
 "// Define your own mock data here:
 export const standard = (/* vars, { ctx, req } */) => ({
   userProfile: {
@@ -321,47 +187,7 @@ export const standard = (/* vars, { ctx, req } */) => ({
 "
 `;
 
-exports[`creates a cell mock with a kebabCase word name 1`] = `
-"// Define your own mock data here:
-export const standard = (/* vars, { ctx, req } */) => ({
-  userProfile: {
-    id: 42,
-  },
-})
-"
-`;
-
-exports[`creates a cell mock with a multi word name 1`] = `
-"// Define your own mock data here:
-export const standard = (/* vars, { ctx, req } */) => ({
-  userProfile: {
-    id: 42,
-  },
-})
-"
-`;
-
-exports[`creates a cell mock with a single word name 1`] = `
-"// Define your own mock data here:
-export const standard = (/* vars, { ctx, req } */) => ({
-  user: {
-    id: 42,
-  },
-})
-"
-`;
-
-exports[`creates a cell mock with a snakeCase word name 1`] = `
-"// Define your own mock data here:
-export const standard = (/* vars, { ctx, req } */) => ({
-  userProfile: {
-    id: 42,
-  },
-})
-"
-`;
-
-exports[`creates a cell stories with a camelCase word name 1`] = `
+exports[`Multiword files creates a cell stories with a multi word name 1`] = `
 "import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
 
@@ -385,81 +211,87 @@ export default { title: 'Cells/UserProfileCell' }
 "
 `;
 
-exports[`creates a cell stories with a kebabCase word name 1`] = `
-"import { Loading, Empty, Failure, Success } from './UserProfileCell'
+exports[`Multiword files creates a cell test with a multi word name 1`] = `
+"import { render } from '@redwoodjs/testing/web'
+import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
 
-export const loading = () => {
-  return Loading ? <Loading /> : <></>
-}
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float and DateTime types.
+//           Please refer to the RedwoodJS Testing Docs:
+//        https://redwoodjs.com/docs/testing#testing-cells
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
 
-export const empty = () => {
-  return Empty ? <Empty /> : <></>
-}
+describe('UserProfileCell', () => {
+  it('renders Loading successfully', () => {
+    expect(() => {
+      render(<Loading />)
+    }).not.toThrow()
+  })
 
-export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
-}
+  it('renders Empty successfully', async () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
 
-export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : <></>
-}
+  it('renders Failure successfully', async () => {
+    expect(() => {
+      render(<Failure error={new Error('Oh no')} />)
+    }).not.toThrow()
+  })
 
-export default { title: 'Cells/UserProfileCell' }
+  // When you're ready to test the actual output of your component render
+  // you could test that, for example, certain text is present:
+  //
+  // 1. import { screen } from '@redwoodjs/testing/web'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
+
+  it('renders Success successfully', async () => {
+    expect(() => {
+      render(<Success userProfile={standard().userProfile} />)
+    }).not.toThrow()
+  })
+})
 "
 `;
 
-exports[`creates a cell stories with a multi word name 1`] = `
-"import { Loading, Empty, Failure, Success } from './UserProfileCell'
-import { standard } from './UserProfileCell.mock'
+exports[`Single word files creates a cell component with a single word name 1`] = `
+"export const QUERY = gql\`
+  query FindUserQuery($id: Int!) {
+    user: user(id: $id) {
+      id
+    }
+  }
+\`
 
-export const loading = () => {
-  return Loading ? <Loading /> : <></>
-}
+export const Loading = () => <div>Loading...</div>
 
-export const empty = () => {
-  return Empty ? <Empty /> : <></>
-}
+export const Empty = () => <div>Empty</div>
 
-export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
-}
+export const Failure = ({ error }) => (
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
+)
 
-export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : <></>
+export const Success = ({ user }) => {
+  return <div>{JSON.stringify(user)}</div>
 }
-
-export default { title: 'Cells/UserProfileCell' }
 "
 `;
 
-exports[`creates a cell stories with a single word name 1`] = `
-"import { Loading, Empty, Failure, Success } from './UserCell'
-import { standard } from './UserCell.mock'
-
-export const loading = () => {
-  return Loading ? <Loading /> : <></>
-}
-
-export const empty = () => {
-  return Empty ? <Empty /> : <></>
-}
-
-export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
-}
-
-export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : <></>
-}
-
-export default { title: 'Cells/UserCell' }
+exports[`Single word files creates a cell mock with a single word name 1`] = `
+"// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  user: {
+    id: 42,
+  },
+})
 "
 `;
 
-exports[`creates a cell stories with a snakeCase word name 1`] = `
-"import { Loading, Empty, Failure, Success } from './UserProfileCell'
-import { standard } from './UserProfileCell.mock'
+exports[`Single word files creates a cell stories with a single word name 1`] = `
+"import { Loading, Empty, Failure, Success } from './UserCell'
+import { standard } from './UserCell.mock'
 
 export const loading = () => {
   return Loading ? <Loading /> : <></>
@@ -477,14 +309,14 @@ export const success = (args) => {
   return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
-export default { title: 'Cells/UserProfileCell' }
+export default { title: 'Cells/UserCell' }
 "
 `;
 
-exports[`creates a cell test with a camelCase word name 1`] = `
+exports[`Single word files creates a cell test with a single word name 1`] = `
 "import { render } from '@redwoodjs/testing/web'
-import { Loading, Empty, Failure, Success } from './UserProfileCell'
-import { standard } from './UserProfileCell.mock'
+import { Loading, Empty, Failure, Success } from './UserCell'
+import { standard } from './UserCell.mock'
 
 // Generated boilerplate tests do not account for all circumstances
 // and can fail without adjustments, e.g. Float and DateTime types.
@@ -492,7 +324,7 @@ import { standard } from './UserProfileCell.mock'
 //        https://redwoodjs.com/docs/testing#testing-cells
 // https://redwoodjs.com/docs/testing#jest-expect-type-considerations
 
-describe('UserProfileCell', () => {
+describe('UserCell', () => {
   it('renders Loading successfully', () => {
     expect(() => {
       render(<Loading />)
@@ -519,14 +351,71 @@ describe('UserProfileCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success userProfile={standard().userProfile} />)
+      render(<Success user={standard().user} />)
     }).not.toThrow()
   })
 })
 "
 `;
 
-exports[`creates a cell test with a kebabCase word name 1`] = `
+exports[`Snake case words creates a cell component with a snakeCase word name 1`] = `
+"export const QUERY = gql\`
+  query FindUserProfileQuery($id: Int!) {
+    userProfile: userProfile(id: $id) {
+      id
+    }
+  }
+\`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }) => (
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
+)
+
+export const Success = ({ userProfile }) => {
+  return <div>{JSON.stringify(userProfile)}</div>
+}
+"
+`;
+
+exports[`Snake case words creates a cell mock with a snakeCase word name 1`] = `
+"// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  userProfile: {
+    id: 42,
+  },
+})
+"
+`;
+
+exports[`Snake case words creates a cell stories with a snakeCase word name 1`] = `
+"import { Loading, Empty, Failure, Success } from './UserProfileCell'
+import { standard } from './UserProfileCell.mock'
+
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
+}
+
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
+}
+
+export const failure = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
+}
+
+export const success = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
+}
+
+export default { title: 'Cells/UserProfileCell' }
+"
+`;
+
+exports[`Snake case words creates a cell test with a snakeCase word name 1`] = `
 "import { render } from '@redwoodjs/testing/web'
 import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
@@ -571,10 +460,40 @@ describe('UserProfileCell', () => {
 "
 `;
 
-exports[`creates a cell test with a multi word name 1`] = `
+exports[`TypeScript: generates list cells if list flag passed in 1`] = `
+"import type { FindBazingaQuery, FindBazingaQueryVariables } from 'types/graphql'
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+export const QUERY = gql\`
+  query FindBazingaQuery($id: Int!) {
+    bazinga: bazinga(id: $id) {
+      id
+    }
+  }
+\`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindBazingaQueryVariables>) => (
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
+)
+
+export const Success = ({
+  bazinga,
+}: CellSuccessProps<FindBazingaQuery, FindBazingaQueryVariables>) => {
+  return <div>{JSON.stringify(bazinga)}</div>
+}
+"
+`;
+
+exports[`TypeScript: generates list cells if list flag passed in 2`] = `
 "import { render } from '@redwoodjs/testing/web'
-import { Loading, Empty, Failure, Success } from './UserProfileCell'
-import { standard } from './UserProfileCell.mock'
+import { Loading, Empty, Failure, Success } from './BazingaCell'
+import { standard } from './BazingaCell.mock'
 
 // Generated boilerplate tests do not account for all circumstances
 // and can fail without adjustments, e.g. Float and DateTime types.
@@ -582,7 +501,7 @@ import { standard } from './UserProfileCell.mock'
 //        https://redwoodjs.com/docs/testing#testing-cells
 // https://redwoodjs.com/docs/testing#jest-expect-type-considerations
 
-describe('UserProfileCell', () => {
+describe('BazingaCell', () => {
   it('renders Loading successfully', () => {
     expect(() => {
       render(<Loading />)
@@ -609,59 +528,140 @@ describe('UserProfileCell', () => {
 
   it('renders Success successfully', async () => {
     expect(() => {
-      render(<Success userProfile={standard().userProfile} />)
+      render(<Success bazinga={standard().bazinga} />)
     }).not.toThrow()
   })
 })
 "
 `;
 
-exports[`creates a cell test with a single word name 1`] = `
-"import { render } from '@redwoodjs/testing/web'
-import { Loading, Empty, Failure, Success } from './UserCell'
-import { standard } from './UserCell.mock'
+exports[`TypeScript: generates list cells if list flag passed in 3`] = `
+"import type { ComponentStory } from '@storybook/react'
 
-// Generated boilerplate tests do not account for all circumstances
-// and can fail without adjustments, e.g. Float and DateTime types.
-//           Please refer to the RedwoodJS Testing Docs:
-//        https://redwoodjs.com/docs/testing#testing-cells
-// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+import { Loading, Empty, Failure, Success } from './BazingaCell'
+import { standard } from './BazingaCell.mock'
 
-describe('UserCell', () => {
-  it('renders Loading successfully', () => {
-    expect(() => {
-      render(<Loading />)
-    }).not.toThrow()
-  })
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
+}
 
-  it('renders Empty successfully', async () => {
-    expect(() => {
-      render(<Empty />)
-    }).not.toThrow()
-  })
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
+}
 
-  it('renders Failure successfully', async () => {
-    expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
-    }).not.toThrow()
-  })
+export const failure: ComponentStory<typeof Failure> = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
+}
 
-  // When you're ready to test the actual output of your component render
-  // you could test that, for example, certain text is present:
-  //
-  // 1. import { screen } from '@redwoodjs/testing/web'
-  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
+export const success: ComponentStory<typeof Success> = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
+}
 
-  it('renders Success successfully', async () => {
-    expect(() => {
-      render(<Success user={standard().user} />)
-    }).not.toThrow()
-  })
+export default { title: 'Cells/BazingaCell' }
+"
+`;
+
+exports[`TypeScript: generates list cells if list flag passed in 4`] = `
+"// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  bazinga: {
+    id: 42,
+  },
+})
+"
+`;
+
+exports[`TypeScript: generates list cells if name is plural 1`] = `
+"import type { MembersQuery } from 'types/graphql'
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+
+export const QUERY = gql\`
+  query MembersQuery {
+    members {
+      id
+    }
+  }
+\`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
+)
+
+export const Success = ({ members }: CellSuccessProps<MembersQuery>) => {
+  return (
+    <ul>
+      {members.map((item) => {
+        return <li key={item.id}>{JSON.stringify(item)}</li>
+      })}
+    </ul>
+  )
+}
+"
+`;
+
+exports[`camelCase words creates a cell component with a camelCase word name 1`] = `
+"export const QUERY = gql\`
+  query FindUserProfileQuery($id: Int!) {
+    userProfile: userProfile(id: $id) {
+      id
+    }
+  }
+\`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }) => (
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
+)
+
+export const Success = ({ userProfile }) => {
+  return <div>{JSON.stringify(userProfile)}</div>
+}
+"
+`;
+
+exports[`camelCase words creates a cell mock with a camelCase word name 1`] = `
+"// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  userProfile: {
+    id: 42,
+  },
 })
 "
 `;
 
-exports[`creates a cell test with a snakeCase word name 1`] = `
+exports[`camelCase words creates a cell stories with a camelCase word name 1`] = `
+"import { Loading, Empty, Failure, Success } from './UserProfileCell'
+import { standard } from './UserProfileCell.mock'
+
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
+}
+
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
+}
+
+export const failure = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
+}
+
+export const success = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
+}
+
+export default { title: 'Cells/UserProfileCell' }
+"
+`;
+
+exports[`camelCase words creates a cell test with a camelCase word name 1`] = `
 "import { render } from '@redwoodjs/testing/web'
 import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
diff --git a/packages/cli/src/commands/generate/cell/__tests__/cell.test.js b/packages/cli/src/commands/generate/cell/__tests__/cell.test.js
index 5952cff0fb75..c4b2c1dc3e4f 100644
--- a/packages/cli/src/commands/generate/cell/__tests__/cell.test.js
+++ b/packages/cli/src/commands/generate/cell/__tests__/cell.test.js
@@ -13,133 +13,64 @@ jest.mock('@redwoodjs/structure', () => {
   }
 })
 
-let singleWordFiles,
-  multiWordFiles,
-  snakeCaseWordFiles,
-  kebabCaseWordFiles,
-  camelCaseWordFiles,
-  withoutTestFiles,
-  withoutStoryFiles,
-  withoutTestAndStoryFiles,
-  listFlagPassedIn,
-  listInferredFromName,
-  modelPluralMatchesSingularWithList,
-  modelPluralMatchesSingularWithoutList,
-  modelWithStringId,
-  modelWithStringIdList,
-  findDataByIdTypeScript,
-  listInferredFromNameTypeScript
-
-beforeAll(async () => {
-  singleWordFiles = await cell.files({
-    name: 'User',
-    tests: true,
-    stories: true,
-    list: false,
-  })
-  multiWordFiles = await cell.files({
-    name: 'UserProfile',
-    tests: true,
-    stories: true,
-    list: false,
-  })
-  snakeCaseWordFiles = await cell.files({
-    name: 'user_profile',
-    tests: true,
-    stories: true,
-    list: false,
-  })
-  kebabCaseWordFiles = await cell.files({
-    name: 'user-profile',
-    tests: true,
-    stories: true,
-    list: false,
-  })
-  camelCaseWordFiles = await cell.files({
-    name: 'userProfile',
-    tests: true,
-    stories: true,
-    list: false,
-  })
-  withoutTestFiles = await cell.files({
-    name: 'User',
-    tests: false,
-    stories: true,
-    list: false,
-  })
-  withoutStoryFiles = await cell.files({
-    name: 'User',
-    tests: true,
-    stories: false,
-    list: false,
-  })
-  withoutTestAndStoryFiles = await cell.files({
-    name: 'User',
-    tests: false,
-    stories: false,
-    list: false,
-  })
-
-  listFlagPassedIn = await cell.files({
-    name: 'Member',
-    tests: true,
-    stories: true,
-    list: true,
-  })
-
-  listInferredFromName = await cell.files({
-    name: 'Members',
-    tests: true,
-    stories: true,
-  })
-
-  modelPluralMatchesSingularWithList = await cell.files({
-    name: 'equipment',
-    tests: true,
-    stories: true,
-    list: true,
+describe('Single word files', () => {
+  let singleWordFiles
+
+  beforeAll(async () => {
+    singleWordFiles = await cell.files({
+      name: 'User',
+      tests: true,
+      stories: true,
+      list: false,
+    })
   })
 
-  modelPluralMatchesSingularWithoutList = await cell.files({
-    name: 'equipment',
-    tests: true,
-    stories: true,
-    list: false,
+  it('returns exactly 4 files', () => {
+    expect(Object.keys(singleWordFiles).length).toEqual(4)
   })
 
-  modelWithStringId = await cell.files({
-    name: 'address',
-    tests: true,
-    stories: true,
-    list: false,
+  it('creates a cell component with a single word name', () => {
+    expect(
+      singleWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserCell/UserCell.js'
+        )
+      ]
+    ).toMatchSnapshot()
   })
 
-  modelWithStringIdList = await cell.files({
-    name: 'address',
-    tests: true,
-    stories: true,
-    list: true,
+  it('creates a cell test with a single word name', () => {
+    expect(
+      singleWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserCell/UserCell.test.js'
+        )
+      ]
+    ).toMatchSnapshot()
   })
 
-  findDataByIdTypeScript = await cell.files({
-    name: 'Bazinga',
-    tests: true,
-    stories: true,
-    typescript: true,
+  it('creates a cell stories with a single word name', () => {
+    expect(
+      singleWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserCell/UserCell.stories.js'
+        )
+      ]
+    ).toMatchSnapshot()
   })
 
-  listInferredFromNameTypeScript = await cell.files({
-    name: 'Members',
-    tests: true,
-    stories: true,
-    typescript: true,
+  it('creates a cell mock with a single word name', () => {
+    expect(
+      singleWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserCell/UserCell.mock.js'
+        )
+      ]
+    ).toMatchSnapshot()
   })
 })
 
 // Single Word Scenario: User
-test('returns exactly 4 files', () => {
-  expect(Object.keys(singleWordFiles).length).toEqual(4)
-})
 
 test('trims Cell from end of name', async () => {
   const files = await cell.files({
@@ -161,209 +92,229 @@ test('trims Cell from end of name', async () => {
   ).toBeTruthy()
 })
 
-test('creates a cell component with a single word name', () => {
-  expect(
-    singleWordFiles[
-      path.normalize('/path/to/project/web/src/components/UserCell/UserCell.js')
-    ]
-  ).toMatchSnapshot()
-})
+describe('Multiword files', () => {
+  let multiWordFiles
 
-test('creates a cell test with a single word name', () => {
-  expect(
-    singleWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserCell/UserCell.test.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+  beforeAll(async () => {
+    multiWordFiles = await cell.files({
+      name: 'UserProfile',
+      tests: true,
+      stories: true,
+      list: false,
+    })
+  })
 
-test('creates a cell stories with a single word name', () => {
-  expect(
-    singleWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserCell/UserCell.stories.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+  // Multi Word Scenario: UserProfile
+  it('creates a cell component with a multi word name', () => {
+    expect(
+      multiWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
 
-test('creates a cell mock with a single word name', () => {
-  expect(
-    singleWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserCell/UserCell.mock.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+  it('creates a cell test with a multi word name', () => {
+    expect(
+      multiWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.test.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
 
-// Multi Word Scenario: UserProfile
-test('creates a cell component with a multi word name', () => {
-  expect(
-    multiWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+  it('creates a cell stories with a multi word name', () => {
+    expect(
+      multiWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.stories.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
 
-test('creates a cell test with a multi word name', () => {
-  expect(
-    multiWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.test.js'
-      )
-    ]
-  ).toMatchSnapshot()
+  it('creates a cell mock with a multi word name', () => {
+    expect(
+      multiWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.mock.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
 })
 
-test('creates a cell stories with a multi word name', () => {
-  expect(
-    multiWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.stories.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+describe('Snake case words', () => {
+  let snakeCaseWordFiles
 
-test('creates a cell mock with a multi word name', () => {
-  expect(
-    multiWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.mock.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+  beforeAll(async () => {
+    snakeCaseWordFiles = await cell.files({
+      name: 'user_profile',
+      tests: true,
+      stories: true,
+      list: false,
+    })
+  })
 
-// SnakeCase Word Scenario: user_profile
-test('creates a cell component with a snakeCase word name', () => {
-  expect(
-    snakeCaseWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+  // SnakeCase Word Scenario: user_profile
+  it('creates a cell component with a snakeCase word name', () => {
+    expect(
+      snakeCaseWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
 
-test('creates a cell test with a snakeCase word name', () => {
-  expect(
-    snakeCaseWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.test.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+  it('creates a cell test with a snakeCase word name', () => {
+    expect(
+      snakeCaseWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.test.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
 
-test('creates a cell stories with a snakeCase word name', () => {
-  expect(
-    snakeCaseWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.stories.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+  it('creates a cell stories with a snakeCase word name', () => {
+    expect(
+      snakeCaseWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.stories.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
 
-test('creates a cell mock with a snakeCase word name', () => {
-  expect(
-    snakeCaseWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.mock.js'
-      )
-    ]
-  ).toMatchSnapshot()
+  it('creates a cell mock with a snakeCase word name', () => {
+    expect(
+      snakeCaseWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.mock.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
 })
 
-// KebabCase Word Scenario: user-profile
-test('creates a cell component with a kebabCase word name', () => {
-  expect(
-    kebabCaseWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+describe('Kebab case words', () => {
+  let kebabCaseWordFiles
+  beforeAll(async () => {
+    kebabCaseWordFiles = await cell.files({
+      name: 'user-profile',
+      tests: true,
+      stories: true,
+      list: false,
+    })
+  })
 
-test('creates a cell test with a kebabCase word name', () => {
-  expect(
-    kebabCaseWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.test.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+  // KebabCase Word Scenario: user-profile
+  it('creates a cell component with a kebabCase word name', () => {
+    expect(
+      kebabCaseWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
 
-test('creates a cell stories with a kebabCase word name', () => {
-  expect(
-    kebabCaseWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.stories.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+  it('creates a cell test with a kebabCase word name', () => {
+    expect(
+      kebabCaseWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.test.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
 
-test('creates a cell mock with a kebabCase word name', () => {
-  expect(
-    kebabCaseWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.mock.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+  it('creates a cell stories with a kebabCase word name', () => {
+    expect(
+      kebabCaseWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.stories.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
 
-// camelCase Word Scenario: user-profile
-test('creates a cell component with a camelCase word name', () => {
-  expect(
-    camelCaseWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.js'
-      )
-    ]
-  ).toMatchSnapshot()
+  it('creates a cell mock with a kebabCase word name', () => {
+    expect(
+      kebabCaseWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.mock.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
 })
 
-test('creates a cell test with a camelCase word name', () => {
-  expect(
-    camelCaseWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.test.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+describe('camelCase words', () => {
+  let camelCaseWordFiles
 
-test('creates a cell stories with a camelCase word name', () => {
-  expect(
-    camelCaseWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.stories.js'
-      )
-    ]
-  ).toMatchSnapshot()
-})
+  beforeAll(async () => {
+    camelCaseWordFiles = await cell.files({
+      name: 'userProfile',
+      tests: true,
+      stories: true,
+      list: false,
+    })
+  })
 
-test('creates a cell mock with a camelCase word name', () => {
-  expect(
-    camelCaseWordFiles[
-      path.normalize(
-        '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.mock.js'
-      )
-    ]
-  ).toMatchSnapshot()
+  // camelCase Word Scenario: user-profile
+  it('creates a cell component with a camelCase word name', () => {
+    expect(
+      camelCaseWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
+
+  it('creates a cell test with a camelCase word name', () => {
+    expect(
+      camelCaseWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.test.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
+
+  it('creates a cell stories with a camelCase word name', () => {
+    expect(
+      camelCaseWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.stories.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
+
+  it('creates a cell mock with a camelCase word name', () => {
+    expect(
+      camelCaseWordFiles[
+        path.normalize(
+          '/path/to/project/web/src/components/UserProfileCell/UserProfileCell.mock.js'
+        )
+      ]
+    ).toMatchSnapshot()
+  })
 })
 
-test("doesn't include test file when --tests is set to false", () => {
+test("doesn't include test file when --tests is set to false", async () => {
+  const withoutTestFiles = await cell.files({
+    name: 'User',
+    tests: false,
+    stories: true,
+    list: false,
+  })
+
   expect(Object.keys(withoutTestFiles)).toEqual([
     path.normalize(
       '/path/to/project/web/src/components/UserCell/UserCell.mock.js'
@@ -375,7 +326,14 @@ test("doesn't include test file when --tests is set to false", () => {
   ])
 })
 
-test("doesn't include storybook file when --stories is set to false", () => {
+test("doesn't include storybook file when --stories is set to false", async () => {
+  const withoutStoryFiles = await cell.files({
+    name: 'User',
+    tests: true,
+    stories: false,
+    list: false,
+  })
+
   expect(Object.keys(withoutStoryFiles)).toEqual([
     path.normalize(
       '/path/to/project/web/src/components/UserCell/UserCell.mock.js'
@@ -387,13 +345,27 @@ test("doesn't include storybook file when --stories is set to false", () => {
   ])
 })
 
-test("doesn't include storybook and test files when --stories and --tests is set to false", () => {
+test("doesn't include storybook and test files when --stories and --tests is set to false", async () => {
+  const withoutTestAndStoryFiles = await cell.files({
+    name: 'User',
+    tests: false,
+    stories: false,
+    list: false,
+  })
+
   expect(Object.keys(withoutTestAndStoryFiles)).toEqual([
     path.normalize('/path/to/project/web/src/components/UserCell/UserCell.js'),
   ])
 })
 
-test('generates list cells if list flag passed in', () => {
+test('generates list cells if list flag passed in', async () => {
+  const listFlagPassedIn = await cell.files({
+    name: 'Member',
+    tests: true,
+    stories: true,
+    list: true,
+  })
+
   const CELL_PATH = path.normalize(
     '/path/to/project/web/src/components/MembersCell/MembersCell.js'
   )
@@ -425,7 +397,13 @@ test('generates list cells if list flag passed in', () => {
   expect(listFlagPassedIn[MOCK_PATH]).toMatchSnapshot()
 })
 
-test('generates list cells if name is plural', () => {
+test('generates list cells if name is plural', async () => {
+  const listInferredFromName = await cell.files({
+    name: 'Members',
+    tests: true,
+    stories: true,
+  })
+
   const CELL_PATH = path.normalize(
     '/path/to/project/web/src/components/MembersCell/MembersCell.js'
   )
@@ -454,7 +432,14 @@ test('generates list cells if name is plural', () => {
   expect(listInferredFromName[CELL_PATH]).toMatchSnapshot()
 })
 
-test('TypeScript: generates list cells if list flag passed in', () => {
+test('TypeScript: generates list cells if list flag passed in', async () => {
+  const findDataByIdTypeScript = await cell.files({
+    name: 'Bazinga',
+    tests: true,
+    stories: true,
+    typescript: true,
+  })
+
   const CELL_PATH = path.normalize(
     '/path/to/project/web/src/components/BazingaCell/BazingaCell.tsx'
   )
@@ -486,7 +471,14 @@ test('TypeScript: generates list cells if list flag passed in', () => {
   expect(findDataByIdTypeScript[MOCK_PATH]).toMatchSnapshot()
 })
 
-test('TypeScript: generates list cells if name is plural', () => {
+test('TypeScript: generates list cells if name is plural', async () => {
+  const listInferredFromNameTypeScript = await cell.files({
+    name: 'Members',
+    tests: true,
+    stories: true,
+    typescript: true,
+  })
+
   const CELL_PATH = path.normalize(
     '/path/to/project/web/src/components/MembersCell/MembersCell.tsx'
   )
@@ -515,7 +507,14 @@ test('TypeScript: generates list cells if name is plural', () => {
   expect(listInferredFromNameTypeScript[CELL_PATH]).toMatchSnapshot()
 })
 
-test('"equipment" with list flag', () => {
+test('"equipment" with list flag', async () => {
+  const modelPluralMatchesSingularWithList = await cell.files({
+    name: 'equipment',
+    tests: true,
+    stories: true,
+    list: true,
+  })
+
   const CELL_PATH = path.normalize(
     '/path/to/project/web/src/components/EquipmentListCell/EquipmentListCell.js'
   )
@@ -544,7 +543,14 @@ test('"equipment" with list flag', () => {
   expect(modelPluralMatchesSingularWithList[CELL_PATH]).toMatchSnapshot()
 })
 
-test('"equipment" withOUT list flag should find equipment by id', () => {
+test('"equipment" withOUT list flag should find equipment by id', async () => {
+  const modelPluralMatchesSingularWithoutList = await cell.files({
+    name: 'equipment',
+    tests: true,
+    stories: true,
+    list: false,
+  })
+
   const CELL_PATH = path.normalize(
     '/path/to/project/web/src/components/EquipmentCell/EquipmentCell.js'
   )
@@ -573,7 +579,14 @@ test('"equipment" withOUT list flag should find equipment by id', () => {
   expect(modelPluralMatchesSingularWithoutList[CELL_PATH]).toMatchSnapshot()
 })
 
-test('generates a cell with a string primary id key', () => {
+test('generates a cell with a string primary id key', async () => {
+  const modelWithStringId = await cell.files({
+    name: 'address',
+    tests: true,
+    stories: true,
+    list: false,
+  })
+
   const CELL_PATH = path.normalize(
     '/path/to/project/web/src/components/AddressCell/AddressCell.js'
   )
@@ -605,7 +618,14 @@ test('generates a cell with a string primary id key', () => {
   expect(modelWithStringId[MOCK_PATH]).toMatchSnapshot()
 })
 
-test('generates list a cell with a string primary id keys', () => {
+test('generates list a cell with a string primary id keys', async () => {
+  const modelWithStringIdList = await cell.files({
+    name: 'address',
+    tests: true,
+    stories: true,
+    list: true,
+  })
+
   const CELL_PATH = path.normalize(
     '/path/to/project/web/src/components/AddressesCell/AddressesCell.js'
   )