Nativebase: Jest support

[wsmlby]

Mentioned in:
https://github.com/GeekyAnts/NativeBase/issues/272

jest is currently broken with native-base

react-native, react and native-base version

0.38.1, 15.4.1, 0.5.18

Expected behaviour

npm test works

Actual behaviour

npm test failed with

import Drawer from './Components/vendor/react-native-drawer';
    ^^^^^^
    SyntaxError: Unexpected token import

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)

[dikarel]

Try the following solution:

Add the following property to your package.json's jest config section:

"transformIgnorePatterns": [
  "/node_modules/(?!native-base)/"
]

Like so:

Explanation

1. By default, Jest does not attempt to transpile 3rd party libs (i.e. anything under node_modules). This makes sense, as most "proper" npm packages would do the transpilation already during install or before publishing as a package.

2. The config above changes Jest behaviour from "don't transpile any 3rd party libs" to "don't transpile any 3rd party libs, _except for native-base_"

3. Your test should take more time to run as Jest will now have to transpile native-base.

4. The proper solution is to have native-base transpile ES6 code upon install or before publishing, so that we don't have to deal with this workaround

[sankhadeeproy007]

This has been added to 0.5.21. Please update and let us know if that works.

[jdnichollsc]

Hi guys @sankhadeeproy007 @dikarel
One question... Is possible to detect if the drawer is opened?
I'm getting issues with the following tests (Using enzyme):

1. Using spy to detect if the function was executed

describe('when the filters Button are pressed', () => {
  const wrapper = mount(<ProductList {...testProps} />)

  it('should display a side menu to select filters', () => {
    wrapper.find('[className="filtersBtn"]').first().props().onPress()

    const spy = jest.spyOn(wrapper.find(Drawer).first().props(), 'onOpen')

    expect(spy).toHaveBeenCalled()
  })
})

Error: TypeError: Cannot read property '_isMockFunction' of undefined

1. Using the property open of the Drawer component

describe('when the filters Button are pressed', () => {

  const wrapper = mount(<ProductList {...testProps} />)

  it('should display a side menu to select filters', () => {
    wrapper.find('[className="filtersBtn"]').first().props().onPress()

    expect(wrapper.find(Drawer).first().props().open).toBeTruthy()
  })
})

Error: Expected value to be truthy, instead received undefined

And in both cases I'm getting the following message:
Calling .setNativeProps() in the test renderer environment is not supported. Instead, mock out your components that use findNodeHan dle with replacements that don't rely on the native environment

[developerium]

It fixed my problem
The first test run will be very slow. Subsequent runs will be much faster because of caching mechanism