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:
* props values
* state values
* events on components like clicking,…
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.
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
Make sure you define sonacloud.io organization and token and use it in travis.
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:
- 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>