RedwoodJSのファーストインプレッション

> yarn create redwood-app try-redwoodjs --typescript

.redwood
.vscode
api
├ db
├ src
│ ├ directives
│ ├ functions
│ ├ graphql
│ ├ lib
│ └ services
└ types
scripts
web
└ public
  └ src
    ├ components
    ├ layouts
    └ pages

import type { FindPostQuery } from 'types/graphql'
import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'

export const QUERY = gql`
  query FindPostQuery($id: Int!) {
    post: post(id: $id) {
      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 = ({ post }: CellSuccessProps<FindPostQuery>) => {
  return <div>{JSON.stringify(post)}</div>
}

// Define your own mock data here:
export const standard = (/* vars, { ctx, req } */) => ({
  post: {
    id: 42,
  },
})

import { Loading, Empty, Failure, Success } from './PostCell'
import { standard } from './PostCell.mock'

export const loading = () => {
  return Loading ? <Loading /> : null
}

export const empty = () => {
  return Empty ? <Empty /> : null
}

export const failure = () => {
  return Failure ? <Failure error={new Error('Oh no')} /> : null
}

export const success = () => {
  return Success ? <Success {...standard()} /> : null
}

export default { title: 'Cells/PostCell' }

import { render, screen } from '@redwoodjs/testing/web'
import { Loading, Empty, Failure, Success } from './PostCell'
import { standard } from './PostCell.mock'

// 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

describe('PostCell', () => {
  it('renders Loading successfully', () => {
    expect(() => {
      render(<Loading />)
    }).not.toThrow()
  })

  it('renders Empty successfully', async () => {
    expect(() => {
      render(<Empty />)
    }).not.toThrow()
  })

  it('renders Failure successfully', async () => {
    expect(() => {
      render(<Failure error={new Error('Oh no')} />)
    }).not.toThrow()
  })

  // 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 post={standard().post} />)
    }).not.toThrow()
  })
})

> rw <command>

Commands:
  rw build [side..]          Build for production
  rw check                   Get structural diagnostics for a Redwood project
                             (experimental)               [aliases: diagnostics]
  rw console                 Launch an interactive Redwood shell (experimental)
                                                                    [aliases: c]
  rw data-migrate <command>  Migrate the data in your database
                                                      [aliases: dm, dataMigrate]
  rw deploy <target>         Deploy your Redwood project
  rw destroy <type>          Rollback changes made by the generate command
                                                                    [aliases: d]
  rw dev [side..]            Start development servers for api, and web
  rw exec [name]             Run scripts generated with yarn generate script
  rw generate <type>         Generate boilerplate code and type definitions
                                                                    [aliases: g]
  rw info                    Print your system environment information
  rw lint [path..]           Lint your files
  rw prerender               Prerender pages of your Redwood app at build time
                                                               [aliases: render]
  rw prisma [commands..]     Run Prisma CLI with experimental features
  rw record <command>        Setup RedwoodRecord for your project. Caches a JSON
                             version of your data model and adds
                             api/src/models/index.js with some config.
  rw serve [side]            Run server for api or web in production
  rw setup <commmand>        Initialize project config and install packages
  rw storybook               Launch Storybook: a tool for building UI components
                             and pages in isolation                [aliases: sb]
  rw test [filter..]         Run Jest tests. Defaults to watch mode
  rw ts-to-js                Convert a TypeScript project to JavaScript
  rw type-check [sides..]    Run a TypeScript compiler check on your project
                                                              [aliases: tsc, tc]
  rw upgrade                 Upgrade all @redwoodjs packages via interactive CLI

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]
  --cwd      Working directory to use (where `redwood.toml` is located.)

Examples:
  yarn rw g page home /  "Create a page component named 'Home' at path '/'"