Jest Testing

[jakelacey2012]

Hi nice project by the way,

I've just started using it and its really awesome! I've added jest testing to my project and I'm just wondering would you like me to make a pull request which implements jest testing within this project?

[mcnamee]

Yeah for sure! Thanks so much @jakelacey2012

[jakelacey2012]

Hi @mcnamee thanks for getting back to me
So i've started to create some simple snapshot tests hit a wall hopefuly you can help with https://github.com/jakelacey2012/react-native-starter-app/tree/feature/reactJestTesting is the fork you can run the tests by running npm test.

Whats the problem... When running test we get this

(ノಥ,_｣ಥ)ノ彡┻━┻ Jakes-MacBook-Pro[react-native-starter-app] (feature/reactJestTesting)$npm test -- -u

> StarterKit@1.0.0 test /Users/jakelacey/Documents/workspace/reactnative/react-native-starter-app
> jest "-u"

 PASS  ReactApp/components/__tests__/navbar.elements-tests.js
 PASS  ReactApp/components/__tests__/error-tests.js
 PASS  ReactApp/components/__tests__/alerts-tests.js
 PASS  ReactApp/components/__tests__/button-tests.js
 PASS  ReactApp/components/__tests__/loading-tests.js
 PASS  ReactApp/components/__tests__/list.row-tests.js
 FAIL  ReactApp/components/__tests__/menu-tests.js
  ● Test suite failed to run

    SyntaxError: Unexpected reserved word

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)
      at Object.<anonymous> (ReactApp/screens/forms.js:22:22)
      at Object.<anonymous> (ReactApp/screens/first.load.js:27:12)
[core]

Test Suites: 1 failed, 6 passed, 7 total
Tests:       7 passed, 7 total
Snapshots:   7 passed, 7 total
Time:        4.166s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

It looks like this module import FormValidation from 'tcomb-form-native' in form.js is causing some problems by using reserved words.

I haven't identified the reserved words used, I'm gonna keep looking.... but If you have any thoughts it would be helpful! :)

[mcnamee]

So good, thanks man!
I'd suggest looking into the reserved words they're using, and raising an issue with them if it's a concern.

Can't wait to see more of your work :)

[jakelacey2012]

I've created an issue on tcomb-form-native gcanti/tcomb-form-native#264 just so I can keep the ball rolling and not let this go stale.

[jakelacey2012]

Woo managed to find some time to get it working!!

I've created a PR here #29, I had a merge conflict in package.json so let me know if something is broken

[jakelacey2012]

Thank you for accepting my PR, Keep this issue open just in case something pops up.

[mcnamee]

Hey @jakelacey2012 - are you interested in writing some more thorough tests?
I've got a new branch - v2 - which could do with your testing expertise :)

[jakelacey2012]

For sure :) My next objective will be writing documentation for this so anyone can do it.

[jakelacey2012]

Just out of interest what has changed or changing in v2?

I've just checked out v2 and two tests are failing

I'll try and have a look into it but I'd just thought I'd let you know :)

[mcnamee]

Hey @jakelacey2012
Firstly, thanks for starting on testing for v2!
Sorry I'm not too familiar with Jest.

The basics of v2 - is that it'll contain more of a boilerplate to interact with an API (showing how to pull data from a RESTful API and then put data into Redux).

[jakelacey2012]

No worries :)

 FAIL  src/components/__tests__/menu-tests.js
  ● Test suite failed to run

    TypeError: Cannot read property 'appVersion' of undefined

      at Object.getVersion (node_modules/react-native-device-info/deviceinfo.js:39:20)
      at Object.<anonymous> (src/utils/api.js:26:33)
      at Object.<anonymous> (src/reducers/user/actions.js:50:112)
      at Object.<anonymous> (src/containers/login.js:10:14)

 FAIL  src/components/__tests__/firstload-test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'appVersion' of undefined

      at Object.getVersion (node_modules/react-native-device-info/deviceinfo.js:39:20)
      at Object.<anonymous> (src/utils/api.js:26:33)
      at Object.<anonymous> (src/reducers/recipes/actions.js:10:28)
      at Object.<anonymous> (src/containers/recipes.js:10:14)

The two tests are failing because of this npm package react-native-device-info. This package exports a method in which we can detect the version of the device which we're doing in api.js.

Effectively require('react-native').NativeModules.RNDevice.Info is undefined this we cannot get the version of the device.

@mcnamee Do you know if there is anything we can do to the react-native-device-info package, so that we can force it to be something in development/testing mode?

at the moment I've got a solution but... it's abit hacky :(

let ua;
try {
  // Build user agent string
  ua = `${AppConfig.appName} ` +
    `${DeviceInfo.getVersion()}; ${DeviceInfo.getSystemName()}  ` +
    `${DeviceInfo.getSystemVersion()}; ${DeviceInfo.getBrand()} ` +
    `${DeviceInfo.getDeviceId()}`;

} catch(e) {
  ua = `${AppConfig.appName}`;
}
const USER_AGENT = ua;

If this package doesn't allow us to choose an environment... then what we can do is build a very basic wrapper library that does this job for us. let me know what you think.

[mcnamee]

Hey @jakelacey2012
Your solution looks fine to me 👍