Jest setup

For all those who have not heard about Jest, have a quick look here: https://facebook.github.io/jest/

Jest is used by Facebook to test all JavaScript code including React applications. One of Jest's philosophies is to provide an integrated, "zero-configuration" experience. We observed that when engineers are provided with ready-to-use tools, they end up writing more tests, which in turn results in more stable and healthy codebases.

We used Jest because of the following reasons:

• Minimal configuration
• Watches only changed files
• Fast
• Snapshot testing (explained later)
• Coverage out of box

4 important test scripts every project should have

"scripts": {
    "test": "jest --verbose --coverage",
    "test:update": "jest --verbose --coverage --updateSnapshot",
    "test:watch": "jest --verbose --watch",
    "coverage": "jest --verbose --coverage && open ./coverage/lcov-report/index.html",
  }

• test: It will go through all the test files and execute them. This command will also be used in pre-hooks and CI checks.
• test:watch: This will watch all the test files. It is very useful while writing tests and quickly seeing results.
• test:update: This command will update snapshots for all the presentational components. If the snapshot is not there, it will create it for you. We will discuss snapshots in detail in coming chapters.
• coverage: As the name suggests, this command will generate a coverage report.

Testing conventions:

It is highly recommended to have conventions for test files as well. Here are the conventions we follow:

• Jest recommends having a __test__ folder in the same directory as the file to be tested.
• The naming convention for test files is <testFileName>.test.js. If you are writing tests for abc.component.js, then the test filename would be abc.component.test.js.
• In each expect, we first mention the function name which is to be tested.

Here is a small example following the above mentioned conventions:

//counter.util.js
const counter = (a) => a + 1;

//__test__/counter.util.test.js
describe('counter: Should increment the passed value', () => {
  ...
});

Jest configuration:

As we read in the documentation, Jest is indeed very easy to set up. You do not need a separate config file. The configuration is so simple that it can fit inside package.json.

Here is our Jest config:

"jest": {
    "preset": "react-native",
    "cacheDirectory": "./cache",
    "coveragePathIgnorePatterns": [
      "./app/utils/vendor"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 80
      }
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!react-native|react-clone-referenced-element|react-navigation)"
    ]
  }

• preset: The preset is a node environment that mimics the environment of a React Native app. Because it doesn't load any DOM or browser APIs, it greatly improves Jest's startup time.

• cacheDirectory: It helps you greatly improve the test speed. It does so by creating a cache of compiled modules so that it doesn't have to compile the node_modules every time we run tests.

• coveragePathIgnorePatterns: Defines the files which we want to skip while generating coverage reports.

• coverageThreshold: Defines the threshold limit for all the tests to pass. If the coverage is less than the defined limit, the tests would fail. This helped us in keeping code coverage high throughout development.

• transformIgnorePatterns: All the npm modules which need to be transpiled are added here. These modules are basically ES6/7 modules.

Note: Make sure to add cache and coverage in your gitignore file.

The code till here can be found on the branch chapter/7/7.1