masterlemon7-module5-ci

Lemoncode Front-End Master, 7th edition. Module 5 exercise.

Steps followed

1. Install testing libraries

npm i -D jest @types/jest ts-jest
npm i -D @testing-library/react @testing-library/jest-dom
npm i -D @testing-library/react-hooks react-test-renderer

2. Add jest configuration

Create folder ./config/test
In this same folder, create file setup-after.ts. This file is necessary when we use jest-dom from testing-library, and its content should be this:

import '@testing-library/jest-dom';
import '@testing-library/jest-dom/extend-expect';

In this same folder, create file jest.json with this content

{
  "rootDir": "../../",
  "preset": "ts-jest",
  "restoreMocks": true,
  "setupFilesAfterEnv": ["<rootDir>/config/test/setup-after.ts"], // jest-dom
  "moduleDirectories": ["<rootDir>/src", "node_modules"]
}

Finally, add two new scripts to package.json

"scripts": {
  "start": "run-p -l start:dev start:mock-server",
  "start:dev": "webpack-dev-server",
  "start:mock-server": "cd ./server && npm start",
- "postinstall": "cd ./server && npm i"
+ "postinstall": "cd ./server && npm i",
+ "test": "jest -c ./config/test/jest.json --verbose",
+ "test:watch": "npm run test -- --watchAll -i"
},

3. Add debug configuration

To debug jest specs we will use Visual Studio Code. As we know, VS Code provides by default a node debugger. In order to debug Node.js code, this editor need a file called launch.json. On tab Debug of VS Code we can select an option to create automatically this file on this route ./.vscode

We have to modifiy original auto created content with this content

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest single run",
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "args": [
        "-c",
        "./config/test/jest.json",
        "--verbose",
        "-i",
        "--no-cache"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Jest watch run",
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "args": [
        "-c",
        "./config/test/jest.json",
        "--verbose",
        "-i",
        "--no-cache",
        "--watchAll"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Jest selected file",
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "args": [
        "${fileBasenameNoExtension}",
        "-c",
        "./config/test/jest.json",
        "--verbose",
        "-i",
        "--no-cache",
        "--watchAll"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

4. Add tests:

5. Add coverage configuration

Create file ./config/test/jest.coverage.json. Is almost the same as jest.json.

{
  "rootDir": "../../",
  "preset": "ts-jest",
  "restoreMocks": true,
  "setupFilesAfterEnv": ["<rootDir>/config/test/setup-after.ts"],
  "moduleDirectories": ["<rootDir>/src", "node_modules"],
+ "collectCoverage": true
}

Install rimraf as a development dependency.

npm i -D rimraf

Add two new scripts on package.json

"scripts": {
  "start": "run-p -l start:dev start:mock-server",
  "start:dev": "webpack-dev-server",
  "start:mock-server": "cd ./server && npm start",
  "postinstall": "cd ./server && npm i",
  "test": "jest -c ./config/test/jest.json --verbose",
- "test:watch": "npm run test -- --watchAll -i"
+ "test:watch": "npm run test -- --watchAll -i",
+ "pretest:coverage": "rimraf coverage",
+ "test:coverage": "jest -c ./config/test/jest.coverage.json"
},

6. Add travis-ci coverage

We only have to create .travis.yml file on root folder. Its content should be:

language: node_js
node_js:
  - "10"
install:
  - npm install
script:
  - npm test

7. Add circle-ci coverage

We only have to create config.yml file under folder .circle.ci. Its content should be:

version: 2.1
orbs:
  node: circleci/node@1.1.6
jobs:
  build-and-test:
    executor:
      name: node/default
    steps:
      - checkout
      - node/with-cache:
          steps:
            - run: npm install
            - run: npm test
workflows:
    build-and-test:
      jobs:
        - build-and-test

JTrillo/masterlemon7-module5-ci