Test Driven Development (TDD)

AAA - Arrange, Act, Assert

DIE - describe - it - expect

Fail - Pass - Refactor

Bare-bones ReactJS application with Jest and Enzyme

https://github.com/kadirisani/reactjs-jest-tutorial

Good References:

https://codewithhugo.com/jest-fn-spyon-stub-mock/

It took me a while to find this online tool where TDD can be practiced. Enjoy TDD: https://repl.it/languages/jest  -- it stopped working :(

Webpack made easy :)

Came across this blog and delighted to read the details on how to set up a ReactJs application from scratch. Really awesome, read on: https://www.valentinog.com/blog/babel/

While following the example, use the following in webpack.config.js instead of what was suggested in the blog to resolve the .jsx files:

const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {

    module: {

        rules: [

            {

                test: /\.(js|jsx)$/,

                exclude: /node_modules/,

                resolve: {

                    extensions: [".js", ".jsx"]

                },

                use: {

                    loader: "babel-loader"

                }

            },

            {

                test: /\.html$/,

                use: [

                    {

                        loader: "html-loader"

                    }

                ]

            }

        ]

    },

    plugins: [

        new HtmlWebPackPlugin({

           template: "./src/index.html",

           filename: "./index.html"

        })

    ]

}

And use the following in index.js file (remove the last two lines from Form.js):

import React from 'react'

import ReactDOM from "react-dom"

import Form from "./js/components/Form"

const wrapper = document.getElementById("container")
wrapper ? ReactDOM.render(<Form />, wrapper) : false

Do npm run build and use the main.js file in https://reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute (use a div with id 'container' in index.html)

Also, remove .babelrc and create babel.config.js under project and add the following content:

module.exports = { presets: ['@babel/preset-env', '@babel/preset-react'], };

To add Jest to run the unit tests, do the following steps:

npm i jest babel-jest react-test-renderer --save-dev

npm i enzyme --save-dev

In package.json

"scripts" : {

    "test": "jest"

}

To add SASS/SCSS to this project, check this out: https://medium.com/front-end-weekly/how-to-add-sass-or-scss-to-create-react-app-c303dae4b5bc