How to create an UI app using latest Rails + React + Typescript + Jest - June, 2020.

#webdev #react #typescript #rails

This article will show you how to create an UI app using Rails + React + Typescript + Jest with the latest versions.

First, make sure you have these requirements installed:

ruby 2.7.0p0
gem 3.1.2
rails 6.0.3.1
node 13.x
yarn 1.22.0

Create your Rails application with React support:

$ rails new myapp --webpack=react
$ cd myapp

Add Typescript:
$ bundle exec rails webpacker:install:typescript

Add eslint which is a linting program to check for syntax errors in your typescript code:

$ yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-preact @types/webpack-env eslint-plugin-react -D
$ yarn add babel-plugin-transform-react-jsx

Add ".eslintrc" - a config file of eslint:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  settings: {
    react: {
      version: 'detect'
    }
  }
};

Now we have the base rails app with React & Typescript support. Next, create your first Rails Controller:

$ rails generate controller hello

Open "app/controllers/hello_controller.rb", update it:

class HelloController < ApplicationController
  def home
  end
end

Open "config/routes.rb", update it to point root URL to the new controller:

Rails.application.routes.draw do
  root to: 'hello#home'
end

We also need a "View" file to render the page:

Open "app/views/hello/home.html.erb", add:

<%= javascript_pack_tag 'hello_typescript' %>
<h1>Hello world!</h1>

Finally, you can create your first React component in Typescript: "app/javascript/packs/hello_typescript.tsx" (source link at the bottom)

It's time to add Jest so you can write some jest tests:

$ yarn add jest ts-jest @types/jest @testing-library/react @testing-library/jest-dom -D

In "package.json", add "jest" section point to "setupTests.ts" file to configure jest. Also add "script" section so we can run $ yarn lint and $yarn test:

"scripts": {
  "lint": "eslint app/javascript/**/*.ts[x]",
  "test": "jest"
}

Write your first test "hello.spec.tsx"

import * as React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import { Hello } from './hello_typescript';

it('Hello test', () => {
  const { container } = render(<Hello name="Jest" />);
  expect(container).toHaveTextContent('Hello Jest!');
});