Ignite: Latest AVA failing because of Test/Setup.js

[skellock]

This line:

https://github.com/infinitered/ignite/blob/master/ignite-base/Tests/Setup.js#L46

is causing us grief in the latest version of AVA. It's conflicting with something within react-native-vector-icons.

The work around is to stub React Native Vector Icons or as @javiercr recommends:

Found by @javiercr

Let's get this patched up for Ignite 2. Do we need to do this hack any longer?

[javiercr]

Just to clarify. I didn't get this problem until I created my custom icon font using createIconSet. When using the icon sets that come bundled with react-native-vector-icons it seems to be enough to mock them as done here:

https://github.com/infinitered/ignite/blob/master/ignite-base/Tests/Setup.js#L23

[jamonholmgren]

Going to see if @javiercr can help me replicate this issue (I reached out on our community Slack, Javier).

[jamonholmgren]

Replication steps:

1 - Create a test project

ignite new ignitetestbug

2- Create a new file to generate a custom icon set:

# /ignitetestbug/App/Lib/CustomIconSet.js
import { createIconSet } from 'react-native-vector-icons'
const glyphMap = { }

export default createIconSet(glyphMap, 'custom-font', 'custom-font.ttf')
(You shouldn't need to actually add custom fonts to the project to reproduce the bug)

3- Create a new component that includs the custom icon set

ignite generate component ReproduceTestBug
// @flow

import React from 'react'
import { View, Text } from 'react-native'
import styles from './Styles/ReproduceTestBugStyle'
import CustomIcons from '../Lib/CustomIconSet'

export default class ReproduceTestBug extends React.Component {

  render () {
    return (
      <View style={styles.container}>
        <Text>ReproduceTestBug Component</Text>
      </View>
    )
  }
}

4- reproduce the error by running the test suite

npm test

> [email protected] test /Users/javi/Sites/ignitetestbug
> NODE_ENV=production ava

/Users/javi/Sites/ignitetestbug/node_modules/react-native-vector-icons/index.js:1
(function (exports, require, module, __filename, __dirname) { export { default as createIconSet } from './lib/create-icon-set';
                                                              ^^^^^^
SyntaxError: Unexpected token export
    at Object.exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:543:28)
    at Module._extensions..js (module.js:580:10)
    at require.extensions.(anonymous function) (/Users/javi/Sites/ignitetestbug/node_modules/babel-register/lib/node.js:152:7)
    at extensions.(anonymous function) (/Users/javi/Sites/ignitetestbug/node_modules/require-precompiled/index.js:16:3)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/javi/Sites/ignitetestbug/node_modules/ava/lib/process-adapter.js:104:4)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Module._load (module.js:439:3)
    at hookedLoader (/Users/javi/Sites/ignitetestbug/node_modules/mockery/mockery.js:111:12)
    at Function._module2.default._load (/Users/javi/Sites/ignitetestbug/Tests/Setup.js:51:10)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/javi/Sites/ignitetestbug/App/Lib/CustomIconSet.js:1:1)
    at Module._compile (module.js:571:32)
    at loader (/Users/javi/Sites/ignitetestbug/node_modules/babel-register/lib/node.js:144:5)
    at require.extensions.(anonymous function) (/Users/javi/Sites/ignitetestbug/node_modules/babel-register/lib/node.js:154:7)
    at extensions.(anonymous function) (/Users/javi/Sites/ignitetestbug/node_modules/require-precompiled/index.js:16:3)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/javi/Sites/ignitetestbug/node_modules/ava/lib/process-adapter.js:104:4)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Module._load (module.js:439:3)
    at hookedLoader (/Users/javi/Sites/ignitetestbug/node_modules/mockery/mockery.js:111:12)
    at Function._module2.default._load (/Users/javi/Sites/ignitetestbug/Tests/Setup.js:51:10)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/javi/Sites/ignitetestbug/App/Components/ReproduceTestBug.js:6:1)
    at Module._compile (module.js:571:32)
    at loader (/Users/javi/Sites/ignitetestbug/node_modules/babel-register/lib/node.js:144:5)
    at require.extensions.(anonymous function) (/Users/javi/Sites/ignitetestbug/node_modules/babel-register/lib/node.js:154:7)
    at extensions.(anonymous function) (/Users/javi/Sites/ignitetestbug/node_modules/require-precompiled/index.js:16:3)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/javi/Sites/ignitetestbug/node_modules/ava/lib/process-adapter.js:104:4)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Module._load (module.js:439:3)
    at hookedLoader (/Users/javi/Sites/ignitetestbug/node_modules/mockery/mockery.js:111:12)
    at Function._module2.default._load (/Users/javi/Sites/ignitetestbug/Tests/Setup.js:51:10)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/javi/Sites/ignitetestbug/Tests/Components/ReproduceTestBugTest.js:4:1)
    at Module._compile (module.js:571:32)
    at extensions.(anonymous function) (/Users/javi/Sites/ignitetestbug/node_modules/require-precompiled/index.js:13:11)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/javi/Sites/ignitetestbug/node_modules/ava/lib/process-adapter.js:104:4)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Module._load (module.js:439:3)
    at hookedLoader (/Users/javi/Sites/ignitetestbug/node_modules/mockery/mockery.js:111:12)
    at Function._module2.default._load (/Users/javi/Sites/ignitetestbug/Tests/Setup.js:51:10)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/javi/Sites/ignitetestbug/node_modules/ava/lib/test-worker.js:33:1)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:418:7)
    at startup (bootstrap_node.js:139:9)
    at bootstrap_node.js:533:3

  33 passed
  1 exception

  ✖ Tests/Components/ReproduceTestBugTest.js exited with a non-zero exit code: 1

npm ERR! Test failed.  See above for more details.

[javiercr]

Note that this issue is not related to react-native-vector-icons but any library that doesn't expose already transpiled files. For instance I'm getting the same problem with tcomb-form-native:

node_modules/tcomb-form-native/index.js:1
(function (exports, require, module, __filename, __dirname) { import t from './lib';
                                                              ^^^^^^

I'm really not sure what's the best approach to handle these dependencies while testing. Should Ignite users try to mock them or make sure babel compiles them?

[skellock]

We should configure AVA to read the .babelrc so the environment is the same. In package.json we'll end up with something like this:

  "ava": {
    "babel": "inherit",
    "require": ["babel-register"]
  }

I can take a closer look shortly. You're welcome to beat me to it though. =)

[javiercr]

@skellock ignite (and our project) already sets AVA to inherit the from .babelrc.:

https://github.com/infinitered/ignite-ir-boilerplate-2016/blob/master/boilerplate/package.json.ejs#L69

However the problem still remains.

The other issue I'm having is with libraries that use the platform dependant requires (*.android.js / *.ios.js).

For instance:
https://github.com/gcanti/tcomb-form-native/blob/master/lib/templates/bootstrap/index.js#L4

requires either select.android.js or select.ios.js. This crashes when running tests with AVA. I've seen Jest has support to set the moduleFileExtensions, as explained here to circumvent this problem. I'm still trying to figure out how to deal with this with AVA.

[skellock]

Oh I gotcha now. I'm sorry. I'm not sure how that will go down in AVA. Good question.

[skellock]

Looks like maybe we should be mocking that file? Since we're not running in the packager, we're using normal require rules and not node-haste's.

[javiercr]

On one hand I think that making Ignite responsible for these kind of problems is out of the scope of Ignite (as this has to do more with testing RN apps with AVA than with Ignite itself).

On the other hand, Ignite is the kind of project that attract many newcomers to React Native, and they will probably run into issues like these if they take testing seriously and their projects are big enough (meaning they keep adding dependencies to them).

Off topic, are you guys planning to stick with AVA? I like it a lot, but dealing with these things seems not straightforward and most of the RN community is using Jest (regarding Jest vs AVA I found this interesting).

[javiercr]

NVM I just found the discussion on #781. If you guys decide to move away from AVA in favor of Jest we can close this issue.

[jamonholmgren]

We did move to Jest...we're good to go here @javiercr . Thank you for your help! 👍

[seacloud9]

I also ran @javiercr issue with tcomb-form-native with avaJS I experimented with jest but could not get it to compile tcomb correctly either finally I decided to manually compile that lib with babel then place those files in a directory called precompiled and used mockery to point that dependency to the babel compiled files. Wasn't automagic but does circumvent the headache of SyntaxError: Unexpected token export.