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!'); });