This article is a continuation of part 1

Fifth step – Add linter

It’s always good to have a linter in react component npm package, it helps create a good quality and more understandable code. As tool we use tslint.

npm install tslint tslint-react --save-dev

Now we need a little bit of configuration in file tslint.json, simple example:

{
  "extends": ["tslint:latest", "tslint-react"],
  "rules": {
    "interface-over-type-literal": false,
    "jsx-wrap-multiline": false,
    "quotemark": [true, "single", "jsx-double"],
    "semicolon": [true, "never"]
  }
}

If we want use it in CI or just have more integration we can add linter to scripts in package.json.

...
  "scripts": {
    "lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",
  },
...

Step number six – tests

We will use jest & react-test-renderer

npm install jest ts-jest react-test-renderer @types/react-test-renderer @types/jest --save-dev

We can do the same thing as we done it with linter by changing one line in package.json

...
  "scripts": {
    "test": "jest",
  },
...

Before we write our first test it’s good to add one line to tsconfig.json to exclude tests from build.

{
  "compilerOptions": {
    "target": "es5",                        
    "module": "commonjs",                   
    "lib": ["es6"],                             
    "jsx": "react",                   
    "declaration": true,                   
    "outDir": "./dist",                       
    "rootDir": "./src",                       
    "removeComments": true,               
    "strict": true,                          
    "noImplicitAny": true,              
    "strictNullChecks": true,
    "esModuleInterop": true      
  },
  "exclude": [
    "**/*.test.ts",
    "dist",
    "example"
  ]
}

For jest we have to write simple config file jest.config.js

module.exports = {
  "roots": [
    "<rootDir>/src"
  ],
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
}

Now jest will look for test only in src folder. Check if test run:

npm test

Expected output:

No tests found, exiting with code 1

Ok, let’s create some tests. Start new file src/index.test.tsx. In our case we can test at list two things. One is if our component render’s and second if counter works on click. Give a try:

import React from 'react'
// tslint:disable-next-line: no-implicit-dependencies
import { act, create } from 'react-test-renderer'

import { Counter } from './index'

describe('Counter component tests', () => {
  test('it render', () => {
    const counter = create(<Counter value={1} />)
    const instance = counter.root
    const div = instance.findByType('div')
    expect(div.children[0]).toBe('0')
  })
  test('it increment by value', async () => {
    const counter = create(<Counter value={2} />)
    const instance = counter.root
    const button = instance.findByType('button')
    await act(async () => {
      button.props.onClick()
    })
    const div = instance.findByType('div')
    expect(div.children[0]).toBe('2')
  })
})

Run the tests again

npm test

We should see that two tests pass.

Step seven – add more info about your package for npm and other users

At the end you can always add some additional info in package.json as "repository" for providing feedback, issues and maybe some help. "keywords" that will help for others to find a package. It’s an array of tags connected to your package and describing what it contain. You can add as well "bugs" url and "homepage" url.

Remember to add README.md to your files with instruction how to install your package and whole decryption of use – why and how.

That’s all for now, let me know in the comments if you wish too add something to this boilerplate 🙂 (maybe husky?)

Check github for full code!

If this article was helpful for you – buy me a 🍺🍺🍺


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *