Convert Jest tests to snapshot tests.

Author: cpojer

package.json

@@ -3,48 +3,17 @@
   "version": "0.1.2",
   "private": true,
   "jest": {
-    "setupEnvScriptFile": "./node_modules/react-native/jestSupport/env.js",
-    "haste": {
-      "defaultPlatform": "ios",
-      "platforms": [
-        "ios",
-        "android"
-      ],
-      "providesModuleNodeModules": [
-        "react-native"
-      ]
+    "preset": "jest-react-native",
+    "moduleNameMapper": {
+      "\\.\/datepicker$": "<rootDir>/node_modules/tcomb-form-native/lib/templates/bootstrap/datepicker.ios.js"
     },
-    "testPathIgnorePatterns": [
-      "/node_modules/"
+    "preprocessorIgnorePatterns": [
+      "node_modules/(?!react-native|tcomb-form-native|snowflake-react-native-button)"
     ],
-    "testFileExtensions": [
-      "es6",
-      "js"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "es6",
-      "ios.js"
-    ],
-    "unmockedModulePathPatterns": [
-      "react",
-      "react-addons-test-utils",
-      "react-native-router-flux",
-      "promise",
-      "source-map",
-      "key-mirror",
-      "immutable",
-      "fetch",
-      "redux",
-      "redux-thunk",
-      "fbjs"
-    ],
-    "collectCoverage": false,
     "verbose": true
   },
   "scripts": {
-    "test": "rm -rf ./node_modules/jest-cli/.haste_cache && jest  --no-cache",
+    "test": "jest",
     "start": "react-native start",
     "test:watch": "npm run test -- --watch",
     "test-chrome": "node-debug --preload false --nodejs --harmony jest --runInBand",
@@ -55,7 +24,7 @@
     "immutable": "3.8.1",
     "key-mirror": "1.0.1",
     "react": "15.2.0",
-    "react-native": "0.29.2",
+    "react-native": "0.30.0",
     "react-native-navbar": "1.5.0",
     "react-native-router-flux": "3.31.1",
     "react-native-simple-store": "1.0.1",
@@ -65,18 +34,19 @@
     "redux": "3.5.2",
     "redux-thunk": "2.1.0",
     "regenerator": "0.8.46",
-    "tcomb-form-native": "0.5.3",    
+    "tcomb-form-native": "0.5.3",
     "undefined": "0.1.0",
     "underscore": "1.8.3",
     "validate.js": "0.9.0"
   },
   "devDependencies": {
     "babel-core": "6.9.0",
-    "babel-jest": "12.1.0",
+    "babel-jest": "14.0.0",
     "babel-preset-react-native": "1.8.0",
     "docker": "0.2.14",
     "istanbul": "0.4.3",
-    "jest-cli": "13.2.3",
+    "jest": "14.0.0",
+    "jest-react-native": "14.0.0",
     "react-addons-test-utils": "15.0.2",
     "redux-mock-store": "1.0.3",
     "rnpm-plugin-upgrade": "0.26.0"

src/__mocks__/react-native.js

@@ -5,15 +5,14 @@
  *
  * *Note:* if you want to understand the structures here, add a
  * ```console.log``` and then ```npm test```.
- * 
+ *
  */
 'use strict';
 /**
  * ## Mock
  *  Mock the simpledialog, see: 'src/__mocks__/react-native-simpledialog-android.js'
  */
 
-jest.autoMockOff();
 jest.mock('react-native-simpledialog-android');
 
 /**
@@ -25,7 +24,6 @@ const SimpleAlert = require('react-native-simpledialog-android');
  * ## Under test
  * Object under test
  */
-jest.dontMock('../ErrorAlert');
 var ErrorAlert = require('../ErrorAlert');
 
 /**
@@ -41,7 +39,7 @@ describe('ErrorAlert', () => {
         error: 'Error occurred'
       }
     };
-    
+
     /**
      * Invoke the ErrorAlert constructor and pass in the mocked
      * version

src/components/__tests__/ErrorAlert-test.js

@@ -1,88 +1,30 @@
 /**
  * # FormButton-test.js
- * 
+ *
  * This class tests that the form button displays correctly
  *
  * *Note:* if you want to understand the structures here, add a
  * ```console.log``` and then ```npm test```.
  */
 'use strict';
 
-jest.autoMockOff();
-
 /**
 * ## Imports
  */
 
-const React = require('react-native');
-const { View } = React;
+import 'react-native';
+import React from 'react';
 
-const utils = require('react-addons-test-utils');
+import FormButton from '../FormButton';
 
-/**
- * ## Under test
- * class under test
- */
-jest.dontMock('../FormButton');
-var FormButton = require('../FormButton');
+import renderer from 'react/lib/ReactTestRenderer';
 
-/**
- * ## Test
- */
-describe('FormButton', () => {
-  let formButton;
-
-  /**
-   * ### defaults
-   */ 
-  const buttonProps = {
-    self: this,
+test('FormButton', () => {
+  const props = {
     isDisabled: false,
     onPress: () => {},
     buttonText: 'TestString'
   };
-  
-  /**
-   * ### renderFormButton
-   * render the component under test and return
-   * @returns {Object} object with props, output and the renderer
-   */
-  function renderFormButton(props) {
-    const renderer = utils.createRenderer();
-    renderer.render(<FormButton {...props}/>);
-    const output = renderer.getRenderOutput();
-
-    return {
-      props,
-      output,
-      renderer
-    };
-  }
-  /**
-   * ### beforeEach 
-   * before each test, render the form button with the default props
-   */
-  beforeEach(() => {
-    formButton = renderFormButton(buttonProps);
-  });
-  /**
-   * ### it should be fine
-   * the containing object should be a view
-   */    
-  it('should be fine', () => {
-    const {output} = formButton;
-    expect(output.type).toEqual(View);
-  });
-
-  /**
-   * ### it should display text
-   * the button should be disabled and have the correct text
-   */
-  it('should display text', () => {
-    const {output} = formButton;
-    const button = output.props.children;
-    expect(button.props.isDisabled).toEqual(buttonProps.isDisabled);
-    const buttonText = button.props.children;
-    expect(buttonText).toEqual(buttonProps.buttonText);
-  });
-});//describe FormButton
+  const tree = renderer.create(<FormButton {...props} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/__tests__/FormButton-test.js

@@ -1,6 +1,6 @@
 /**
  * # Header-test.js
- * 
+ *
  * This class tests that the Header component displays correctly
  *
  * *Note:* if you want to understand the structures here, add a
@@ -9,79 +9,45 @@
  */
 'use strict';
 
-jest.autoMockOff();
+jest.mock('ActivityIndicator', () => 'ActivityIndicator');
 
 /**
 * ## Imports
 */
-import React, { View } from 'react-native';
-import utils from 'react-addons-test-utils';
+import 'react-native';
+import React from 'react';
 
-/**
- * ## Under test
- * class under test
- */
-jest.dontMock('../Header');
-var Header = require('../Header');
+import Header from '../Header';
+
+import renderer from 'react/lib/ReactTestRenderer';
 
 /**
  * ## Test
  */
 describe('Header', () => {
-  let header;
-  
-  /**
-   * ### renderHeader
-   * display component and return 
-   * @returns {Object} with props, output and renderer
-   */ 
-
-  function renderHeader(props) {
-    const renderer = utils.createRenderer();
-    renderer.render(<Header {...props}/>);
-    const output = renderer.getRenderOutput();
-
-    return {
-      props,
-      output,
-      renderer
-    };
-  }
   /**
    * ### it should be display empty text when not fetching
    * render the header when not fetching
-   */    
+   */
   it('should be display empty text when not fetching', () => {
-    const buttonProps = {
+    const props = {
       isFetching: false
     };
-    header = renderHeader(buttonProps);
-    const {output} = header;
-    expect(output.type).toEqual(View);
-    expect(output.props.children[0].props.children[1].props.children).toEqual(' ');
+    const tree = renderer.create(<Header {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
 
   });
   /**
    * ### it should be display spinner when fetching
    * When fetching, the GiftedSpinner should display
-   */    
+   */
   it('should be display spinner when fetching', () => {
-    const buttonProps = {
+    const props = {
       isFetching: true
     };
-    header = renderHeader(buttonProps);
-    const {output} = header;
-
-    expect(output.type).toEqual(View);
-    let animating =
-          output.props.children[0].props.children[1].props.animating;
-    let size = output.props.children[0].props.children[1].props.size;    
-
 
-    expect(animating).toEqual(true);
-    expect(size).toEqual('large');
-           
-    //expect(output.props.children[0].props.children[1].type.displayName).toEqual('GiftedSpinner');
+    const tree = renderer.create(<Header {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
   });
 
 });//describe Header