react testing

I have to say that hardest part with react was to figure out testing. (testing components is easy with thousands examples). But how to test props, state vlaues, clicking events, helping functions,… There are many projects in github and almost all of them are without any tests.

I have put together small app, where you can find code with tests.

I have tested:
* components
* props values
* state values
* events on components like clicking,…
* functions

Frankly I haven’t seen any project where they would cover all of the above.

I am not gonna write step by step, just small info I am using Jest & Enzyme testing framework.

For details better check my code. Check for package.json for packages I am using and __tests__ folders for tests.

Here are:
* github link
* travis link
* sonarcloud.io link

enjoy

Advertisements

node/react -> github -> travis -> sonar

When programming I like to keep my code as clean and automated as possible.

I like sonar (does analysis on your code and provide you output how many duplicate, code smells, unused variables,..)

I like node.js / react.js for its quick prototyping and agile and others advantages. So lastly I was looking if I can have setup where I could automate my infrastructure  code -> push to  VCS (github) -> CI (travis) -> code analysis (Sonar).

Here are steps what you need to do:

  • github.com -> on project settings turn on “travis-ci” integration
    • github.com -> project -> settings -> Integration & services -> Add Service -> Travis CI
  • travis-ci.com -> make sure after code push code build is triggered
  •  sonarcloud.io – get started
    • create token here (I used this token in travis – see above)
    • define your organisation here
  • project:

.travis.yml
dist: trusty
sudo: required
addons:
sonarqube:
organization: "czechsource"
branches:
- master
- develop
jdk:
- oraclejdk8
script:
- sonar-scanner
cache:
directories:
- '$HOME/.sonar/cache'

sonar-project.properties
sonar.projectKey=czechsource:reactBlog
sonar.projectName=React.js blog
sonar.projectVersion=1.0
sonar.sources=src
sonar.language=js
sonar.sourceEncoding=UTF-8
sonar.branch=develop,master

Make sure you define sonacloud.io organization and token and use it in travis.

Github repo

travis info

sonarcloud info

Update: I am using git flow and find out that branches “develop” were not sent to sonar. Make sure you add them in .travis.yml as well as in sonar-project.properties files (marked them in bold)

Update2: there is another option using sonarqube-scanner-node project . (I am assuming your project is made by create-react-app by facebook)

  • yarn add sonarqube-scanner-node --dev
  • yarn test -- --coverage
  • package.json -> add in script section:  "sonarqube": "sonarqube-scanner-node"
  • from command line: yarn sonarqube -Dsonar.host.url=https://sonarcloud.io -Dsonar.organization=chowanioksource -Dsonar.sources=src -Dsonar.projectKey=chowanioksource:reactBlog  -Dsonar.login=<sonarcloud.io token>