Posts

Showing posts with the label React

React - Component testing + End-to-End testing

Image
Introduction There are many test frameworks for testing React app.  Facebook introduced their own Jest framework which helps you run test cases against the React components and also mock some of the flow.  With lot of JavaScript developers in the community also having their due soft corner towards Mocha as their test runner. Lets see the things that are good and can be the right tool for the environment.  This post is basically trying to give more overview about how we can test a react app and ensure to automate the same. Tools for testing components The most favored tools include the Jest and Mocha. There are also plenty of other tools like Jasmine. Now these are all your test runner frameworks which use plenty of other libraries to get their work done, like Chai, Karma, PhantomJS or JSDom. Checking this webpage tells more about the community ​ usage : Talking briefly about Jest and Mocha (which requires other library support to run t...

How to create NPM package for a React component - (using Webpack + Babel).

Recently I was working on creating a NPM package for a react component. Tried my hands on writing a react radio button component, with webpack and ES6. You can checkout the source code in github repository:  https://github.com/tan31989/react-radio-button  and the npm repository link is:  https://www.npmjs.com/package/react-radio-button . Here is a quick update on the webpack I used for production and deploying the react component as a library so that others can use it: webpack.config.build.js const path = require('path'); const webpack = require('webpack'); module.exports = { entry: [ /** This section is basically the hook for letting the webpack scan your code * to find that right set of files to bundle up for the library you would * want to expose. In my case, the file inside src/components is where * I have the file to be provided as a library. * This section is also known as entry point */ './src/components/Radi...