Configuring Different Testing library in nwb for React

Writing an application from scratch is time-consuming, especially when you have to configure each and every part of the application. Although it gives us the flexibility to configure the application the way we like, sometimes its time consuming and boring too. It will be nice if we can set up a project with minimal configuration in a short period of time.For these, we can use a toolkit to bootstrap our application.

Toolkit? 🛠 📦

Toolkits are “a set of tools in any form that allows you to create applications with no build configuration.” (via Ronald Rey in awesome-toolkits). For a few examples: react-scripts (what create-react-app leaves you with), , parcel, preact-cli, ember-cli (the first widely used toolkit for JS), and many more.

Here we are going to mostly talk about nwb and creating React application in nwb. nwb is a toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration. nwb also supports building components and publishing libraries to npm store.

Creating React Application

Let’s create an application:

Step 1. Install nwb . Here we are installing nwb globally which helps to use this command for quick development and other projects. If you have any problem in installing you can look at here.

$ npm install -g nwb

Step 2. Use nwb to create a new React application.

$ nwb new react-app angle-fire

Step 3. Look inside.

$ cd angle-fire

Let’s see…

$ ls
CONTRIBUTING.md node_modules package.json src
README.md nwb.config.js public  tests

There’s no webpack.config.js, .babelrc, or karma.conf.js in there. All configuration is done in nwb.config.js. So let’s have a look:

$ cat nwb.config.js
module.exports = { type: 'react-app' }

The configuration looks very minimal! We only need to tell it that we’re building a React app, and it will generate a sensible defaults.

Let’s look at package.json.

$ cat package.json
{
 "name": "angle-fire",
 "version": "1.0.0",
 "description": "Describe angle-fire here",
 "private": true,
 "scripts": {
   "build": "nwb build-react-app",
   "clean": "nwb clean-app",
   "start": "nwb serve-react-app",
   "test": "nwb test-react",
   "test:coverage": "nwb test-react --coverage",
   "test:watch": "nwb test-react --server"
  },
 "dependencies": {
  "react": "^16.7.0",
  "react-dom": "^16.7.0"
 },
 "devDependencies": {
  "nwb": "0.23.x"
 },
 "author": "",
 "license": "MIT",
 "repository": ""
}

• Our only dependencies are react and react-dom.
• Our only devDependencies is just nwb. No webpack, Karma, and Babel stuff — these are all managed by nwb. nwb itself has a lot of tests to make sure that all these stuff work together in a coherent way.

Step 4. Start the server

$ npm start
[...]
nwb: serve-react-app
Compiled successfully in 3652 ms.
The app is running at http://localhost:3000/

• This will fire up webpack-dev-server.
• Try changing the files. You will see that webpack and Babel is already configured to hot-reload React components.
• Try requiring some modules from npm (e.g. `import Rx from ‘rx’`). With the ` — auto-install` flag, when you save the file, it will install the missing dependencies and adds it to your package.json file.
• Try creating a CSS file and import it. webpack is already configured with a proper CSS loader and with autoprefixer.

Setting all that up manually would take me a lot of time.

Step 5. Run the tests.

$ npm run test
[...]
SUMMARY:
✔ 1 test completed

• It runs Karma, integrated with webpack and coverage measurement.
• With the npm run test:watch command, the tests are re-run when you save the file.
• With the npm run test:coverage command, code coverage report is generated. You can install an editor plugin so that you can see which lines are covered by tests, and which lines are not.

Finally, run

$ npm run build

This will generate static assets. JavaScript and CSS from node_modules go into vendor.js, and vendor.css; while code from your app goes into app.js and app.css. Source maps are generated in a separate .map file. You can then upload them to your webserver to host your application.

Customizing Testing library

Jest

Jest is a JavaScript unit testing framework, used by Facebook to test services and React applications.

Jest acts as a test runner, assertion library, and mocking library.

Jest also provides Snapshot testing, the ability to create a rendered ‘snapshot’ of a component and compare it to a previously saved ‘snapshot’. The test will fail if the two do not match. Snapshots will be saved for you beside the test file that created them in an auto-generate __snapshots__ folder.

Enzyme

Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components’ output.

Enzyme, created by Airbnb, adds some great additional utility methods for rendering a component (or multiple components), finding elements, and interacting with elements.

Setting up jest and enzyme in nwb react projects.

Install Jest:

npm install --save-dev jest babel-jest

Install Enzyme:

npm install --save-dev enzyme enzyme-adapter-react-16 enzyme-to-json

enzyme-to-json converts Enzyme wrappers to a format compatible with Jest snapshot testing.

we need to configure our jest file. So let’s create a jest.config.js file at root directory.

To preprocess our file we are defining transform option. Now we need to create a jest.transform.js file in our root directory.

Now we need to create a setupTests.js file at our root directory.

Now we will update the script section of package.json

[....]
"scripts": {
  "build": "nwb build-react-app",
  "clean": "nwb clean-app",
  "start": "nwb serve-react-app",
  "test": "jest --watch --no-cache",
 "test:cover": "jest --coverage",
 "open:coverage": "open ./coverage/lcov-report/index.html"
},
[.....]

Now if you run the command it will work.

What about the react-testing-library?

The react-testing-library is a very light-weight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is:

The more your tests resemble the way your software is used, the more confidence they can give you.

To use react-testing-library we need to do small changes in our code.

Install react-testing-library:

npm install --save-dev react-testing-library jest-dom

We also need to change our jest.config.js file as follows:

And also need to create a rtl.setup.js file at our root directory.

Conclusion

In this way we can use nwb to scaffold our react application with minimal configuration and in addition to that, we can customize our test case the way we want.
For source code you can click here. To know more about deployment you can go to my previous articles deploy react app to s3 and maintaining app version of your react app in s3.