xareelee commented 7 years ago

I'm developing React Native (RN) apps for iOS and Android.

I use storyshots/storybook to snapshot the vDOM(s) of RN components with specific props for UI tests.

However, Jest lacks the functionality to mimic RN events to test whether the buttons work correctly. Then I found airbnb's enzyme.

When I tested RN components with enzyme, I needed to install and set up react-native-mock. Then the issue happened:

Before I introduced react-native-mock to my project, I had an unsolved snapshot conflict.

  ● Storyshots › LoginMsg › entry

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot 1.

    - Snapshot
    + Received

    @@ -314,42 +314,49 @@
               />
             </View>
           </Modal>
           <View
             style={
    -          Object {
    -            "alignItems": "center",
    -            "backgroundColor": "#F7F7F7",
    -            "flex": 1,
    -            "justifyContent": "center",
    -          }
    +          Array [
    +            Object {
    +              "alignItems": "center",
    +              "backgroundColor": "#F7F7F7",
    +              "flex": 1,
    +            },
    +            Object {},
    +          ]
             }
           >

After I add react-native-mock, the test error became:

  ● Storyshots › LoginMsg › entry

    TypeError: _setter is not a function

      at Component.requestAnimationFrame (node_modules/react-timer-mixin/TimerMixin.js:16:14)
      at Component.componentDidMount (node_modules/react-native/Libraries/Components/TextInput/TextInput.js:567:6)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:264:11
      at CallbackQueue.notifyAll (node_modules/react-test-renderer/lib/CallbackQueue.js:76:22)
      at ReactTestReconcileTransaction.close (node_modules/react-test-renderer/lib/ReactTestReconcileTransaction.js:36:26)
      at ReactTestReconcileTransaction.closeAll (node_modules/react-test-renderer/lib/Transaction.js:206:25)
      at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:153:16)
      at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)

I think react-native-mock changes the behavior of storyshots, and make it report conflict incorrectly.

I'll post this issue on both storyshots and react-native-mock.

storyshots/issues/85

RealOrangeOne commented 7 years ago

Looking at your stacktrace, it's actually calling out to react-native components, something react-native-mock stops. How have you setup react-native-mock in your tests?

xareelee commented 7 years ago

Setup file for jest (as a test runner):

{
  "jest": {
    "preset": "react-native",
    "setupFiles": [
      "./.jest_init.js"
    ]
  },
}

Inside the jest config file (whole code):

// .jest_init.js

// This will mutate `react-native`'s require cache with `react-native-mock`'s.
require('react-native-mock/mock'); // <-- side-effects!!!

// Why we need to import 'isomorphic-fetch'?
// See https://github.com/jefflau/jest-fetch-mock/issues/13
import 'isomorphic-fetch'
global.fetch = require('jest-fetch-mock');

I do not do something else with react-native-mock or jest-fetch-mock. I have not used mock objects yet; just include those libraries and set them up.

RealOrangeOne commented 7 years ago

react-native-mock isnt designed to work with jest, as jest contains it's own builtin mock. For this reason it shouldnt be used with it and will likely cause strange issues, as youre having

RealOrangeOne / react-native-mock

Using react-native-mock with storyshots will raise abnormal Error messages #126

storyshots/issues/85