react-native-savor

React Native Savor Adds Delicious Flavors To Your React Native Apps, Like Tests, Coverage and Analysis.

Savor

Overview

Savor gives you all you need to write amazing tests, right out of the box, all in one place: a test framework, BDD and TDD assertions, stubbing/mocking, code coverage and static analysis.

Savor uses the following Open-Source libraries to make that happen:

• Mocha as the test framework
• Chai as the assertion library (both for BDD and for TDD)
• Sinon as the stubbing library
• Istanbul as the code coverage tool
• ESLint as the static analyzer
• Enzyme as the React testing framework

Savor also gives you the ability to plug your tests into your continuous integration process via Coveralls for code coverage and Codacy for code analysis. It also support CodeClimate which is a tool that offers both static analysis and code coverage. To integrate with your CI tool, make sure you add a post-execution script that runs the following:

npm run coveralls
npm run codacy
npm run codeclimate

For Travis CI for example, this is what your .travis.yml file might look like:

language: node_js
node_js:
  - "5.0"
after_success:
  - npm run coveralls
  - npm run codacy
  - npm run codeclimate

Installation

STEP 1

Add Savor to your module as a development dependency:

npm install --save-dev react-native-savor

STEP 2

Add Savor to your module scripts:

"scripts": {
  "savor": "react-native-savor"
}

If you'd like more granularity over your scripts you can also install single Savor commands:

"scripts": {
  "savor": "react-native-savor",
  "test": "react-native-savor test",
  "lint": "react-native-savor lint",
  "cover": "react-native-savor cover",
  "coveralls": "react-native-savor coveralls",
  "codacy": "react-native-savor codacy"
  "codeclimate": "react-native-savor codeclimate"
}

Make sure you also configure Babel correctly in your package.json:

"babel": {
  "plugins": ["transform-react-jsx"],
  "presets": ["react-native", {}]
}

STEP 3

Make sure your code resides under a src directory and all your specs under a test/specs directory:

package.json
node_modules/
src/
  main.js
test/
  assets/
    BasicComponent.js
  specs/
    main.js

Adding Tests

You can now write tests under your test directory, like so:

import React, {
    View,
    Text,
    StyleSheet
} from 'react-native'
import savor from '../../../..'
import BasicComponent from '../assets/react-native/BasicComponent'

const TestText = (<Text>test</Text>)
const TestComponent = (<BasicComponent/> )

savor.add('should mount a basic React Native component', function(context, done) {
  const wrapper = context.shallow(TestComponent)
  context.expect(wrapper.length).to.equal(1)
  context.expect(wrapper).to.contain(TestText)
  done()
}).

run('My React Native Tests')

The Savor Context

When you add a test, you are given a context that contains the following:

  context.expect  // Using Chai
  context.assert  // Using Chai
  context.stub    // Using Sinon
  context.shallow // Using Enzyme
  context.mount   // Using Enzyme
  context.render  // Using Enzyme
  context.dir     // The temporary test location

Running Tests

You can now simply run your tests like so:

npm test

Test Coverage

You can check your coverage like this:

npm run coverage

Static Analysis

You can lint your code like this:

npm run lint

Working Example

Take a look at the example for more details on how to integrate Savor within your module.

Enjoy!

License

Copyright (c) 2016 I. Dan Calinescu

Licensed under the The MIT License (MIT) (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

https://raw.githubusercontent.com/idancali/react-native-savor/master/LICENSE

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.