Creating a Toolchain from Scratch

This is about the setup I used to demonstrate TDD with React.

Scaffolding

As per React documentation , I cloned https://github.com/paradoxinversion/creating-a-react-app-from-scratch

git clone https://github.com/paradoxinversion/creating-a-react-app-from-scratch
Cloning into 'creating-a-react-app-from-scratch'...
remote: Enumerating objects: 9, done.
remote: Counting objects: 100% (9/9), done.
remote: Compressing objects: 100% (9/9), done.
remote: Total 59 (delta 4), reused 0 (delta 0), pack-reused 50
Unpacking objects: 100% (59/59), done.

This setup comes with pre-configured webpack (JavaScript module bundler). A compiler such as Babel and local development webserver called webpack dev server

We can install dependencies by npm install or yarn any of the node package managers.

We could start our development server with yarn start

It will start the development server on 3000 port at http://localhost:3000

Upgrades to setup

async and await support can be added by adding

This would avoid

Uncaught ReferenceError: regeneratorRuntime is not defined
    at eval (App.js:19)

We need to add @babel/plugin-transform-runtime

yarn add -D @babel/plugin-transform-runtime

Then update .babelrc file to include the plugin

{
  "presets": ["@babel/env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

Include testing libraries

• Add jest by installing it as yarn add -D jest

• Add React Testing Library by installing it as

    yarn add -D @testing-library/dom @testing-library/react @testing-library/user-event
  

  The DOM testing library allows us to write tests the way software is being used.

  The @testing-library/react is a wrapper on top of @testing-library/dom by adding APIs for working with React components.

  The @testing-library/user-event is a companion library for Testing Library that provides the more advanced simulation of browser interactions

• Support for styles while testing via jest-css-modules-transform

    yarn add -D  jest-css-modules-transform
  

  Next configure your package.json to include jest config and transform option

    "jest": {
        "transform": {
          ".+\\.(css|styl|less|sass|scss)$": "jest-css-modules-transform",
          "^.+\\.js$": "babel-jest"
        }
      }
  

• Add script to run tests into package.json

        "scripts": { 
            "start": "webpack-dev-server --mode development",
            "test": "jest"
        },
  

  Verify the setup

• Lets add a test file App.spec.js next to App.js

        import React from 'react';
        import { render, screen } from '@testing-library/react';
        import App from './App';
        test('loads and displays app', () => {
            render(<App />)
  
            expect(screen.getByText('Hello, World!')).toBeDefined();
        })
  

• Run the test via yarn test

        yarn test
  
        yarn run v1.17.3
        $ jest
        (node:21268) ExperimentalWarning: The fs.promises API is experimental
         PASS  src/App.spec.js
          √ loads and displays app (29 ms)                                                                                                                                        
  
        Test Suites: 1 passed, 1 total                                                                                                                                            
        Tests:       1 passed, 1 total                                                                                                                                            
        Snapshots:   0 total
        Time:        3.219 s
        Ran all test suites.
        Done in 4.65s.
  

Conclusion

The setup above gives the custom toolchain from scratch and a starting point for your app development.

I will be writing about adding a TypeScript flavour to it.

Update

Please find my article on adding TypeScript

Cover Photo by Bill Oxford on Unsplash