How to add tools for unit testing in react js project ?

Below are the packages and command which need to be installed for unit testing in reactjs app.

yarn add jest enzyme react-test-renderer enzyme-adapter-react-16

I have used several packages which are:

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

Enzyme is a JavaScript Testing utility for React that makes it easier to test React Components' output.

React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

Enzyme adapter has peer dependencies on react and react-dom.

Cross-Origin Resource Sharing in Ruby on Rails Application

While working in Ruby on Rails application I faced a problem with Cross-Origin Resource Sharing. Here is the configuration below how to sort out this problem:

Rack::Cors provides support for Cross-Origin Resource Sharing

Steps to enable rackcors :

1.add gem to your Gemfile:

gem 'rack-cors'

2.Add below code to config/application.rb

# if you are using Rails 3/4

config.middleware.insert_before 0, "Rack::Cors" do

  allow do

    origins '*'

    resource '*', :headers => :any, :methods => :any

  end

end

# if you are using Rails 5

config.middleware.insert_before 0, Rack::Cors do

  allow do

    origins '*'

    resource '*', headers: :any, methods: :any

  end

end

Ruby on Rails Basic Commands

To create app:

rails new your_app

To start server:

rails s or rails server

To remove model:

bundle exec rake db:rollback 

rails destroy model <model_name>

To clear db:

rails db:purge
rails db:migrate

rails db:seed

Or all together.

rails db:purge db:migrate db:seed

ReactJs Component Life Cycle - Creation/Update

Creation:

constructor() // Call super(props), Do: Set up State, Don't: Cause Side-Effects

getDerivedStateFromProps() // Do: Sync state, Don't: Cause Side-Effects

render() // Prepare & Structure JSX Code

Render Child Components //

componentDidMount() // Do: Cause Side-Effects, Don't: Update State (triggers re-render)

Update:

getDerivedStateFromProps(props, state) // Do: Sync state to props, Don't: Cause Side-Effects

shouldComponentUpdate(nextProps, nextState) // Do: Decide whether to continue or not, Don't: Cause side-effects

render() // Prepare & Structure JSX Code

Render Child Components //

getSnapshotBeforeUpdate(prevProps, prevState) // Do: Last minute DOM ops, Dont: Cause side-effects

componentDidUpdate() // Do: Cause Side-Effects, Don't: Update State (triggers re-render)