Add snapshot test suite for React Native support

other/react-native/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react-native"]
+}

other/react-native/__tests__/__snapshots__/render-tests.js.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders with React Native components 1`] = `
+<View>
+  <TextInput
+    allowFontScaling={true}
+    aria-activedescendant={null}
+    aria-autocomplete="list"
+    aria-expanded={false}
+    autoComplete="off"
+    id="downshift-0-input"
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onKeyDown={[Function]}
+    role="combobox"
+    value=""
+  />
+  <View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      id="downshift-0-item-0"
+      onMouseDown={[Function]}
+      onMouseMove={[Function]}
+      onPress={[Function]}
+    >
+      foo
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      id="downshift-0-item-1"
+      onMouseDown={[Function]}
+      onMouseMove={[Function]}
+      onPress={[Function]}
+    >
+      bar
+    </Text>
+  </View>
+</View>
+`;

other/react-native/__tests__/render-tests.js

@@ -0,0 +1,88 @@
+/* eslint-disable react/prop-types */
+// eslint-disable-next-line import/no-unassigned-import
+import {Text, TextInput, View} from 'react-native'
+import React from 'react'
+
+// Note: test renderer must be required after react-native.
+import TestRenderer from 'react-test-renderer'
+
+import Downshift from '../../../dist/downshift.native.cjs'
+
+test('renders with React Native components', () => {
+  const RootView = ({innerRef, ...rest}) => <View ref={innerRef} {...rest} />
+  const renderSpy = jest.fn(({getRootProps, getInputProps, getItemProps}) => (
+    <RootView {...getRootProps({refKey: 'innerRef'})}>
+      <TextInput {...getInputProps()} />
+      <View>
+        <Text {...getItemProps({item: 'foo', index: 0})}>foo</Text>
+        <Text {...getItemProps({item: 'bar', index: 1})}>bar</Text>
+      </View>
+    </RootView>
+  ))
+  const element = <Downshift render={renderSpy} />
+  const renderer = TestRenderer.create(element)
+  expect(renderSpy).toHaveBeenCalledWith(
+    expect.objectContaining({
+      isOpen: false,
+      highlightedIndex: null,
+      selectedItem: null,
+      inputValue: '',
+    }),
+  )
+  const tree = renderer.toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
+test('can use children instead of render prop', () => {
+  const RootView = ({innerRef, ...rest}) => <View ref={innerRef} {...rest} />
+  const renderSpy = jest.fn(({getRootProps, getInputProps, getItemProps}) => (
+    <RootView {...getRootProps({refKey: 'innerRef'})}>
+      <TextInput {...getInputProps()} />
+      <View>
+        <Text {...getItemProps({item: 'foo', index: 0})}>foo</Text>
+        <Text {...getItemProps({item: 'bar', index: 1})}>bar</Text>
+      </View>
+    </RootView>
+  ))
+  const element = <Downshift>{renderSpy}</Downshift>
+  TestRenderer.create(element)
+  expect(renderSpy).toHaveBeenCalledTimes(1)
+})
+
+test('calls onChange when TextInput changes values', () => {
+  const onChange = jest.fn()
+  const Input = jest.fn(props => <TextInput {...props} />)
+
+  const RootView = ({innerRef, ...rest}) => <View ref={innerRef} {...rest} />
+  const renderSpy = jest.fn(({getRootProps, getInputProps, getItemProps}) => (
+    <RootView {...getRootProps({refKey: 'innerRef'})}>
+      <Input {...getInputProps({onChange})} />
+      <View>
+        <Text {...getItemProps({item: 'foo', index: 0})}>foo</Text>
+        <Text {...getItemProps({item: 'bar', index: 1})}>bar</Text>
+      </View>
+    </RootView>
+  ))
+  const element = <Downshift>{renderSpy}</Downshift>
+  TestRenderer.create(element)
+  expect(renderSpy).toHaveBeenCalledTimes(1)
+
+  const [[firstArg]] = Input.mock.calls
+  expect(firstArg).toMatchObject({
+    // TODO: We shouldn't need to know about the internals of how we're affecting the TextInput and what props we're supplying.
+    // See https://github.com/paypal/downshift/issues/361
+    onChangeText: expect.any(Function),
+  })
+  const fakeEvent = 'foobar'
+  firstArg.onChangeText(fakeEvent)
+
+  expect(onChange).toHaveBeenCalledTimes(1)
+  expect(onChange).toHaveBeenCalledWith(fakeEvent)
+})
+
+/*
+ eslint
+  react/prop-types: 0,
+  import/extensions: 0,
+  import/no-unresolved: 0
+ */

other/react-native/jest.config.js

@@ -0,0 +1,10 @@
+const jestConfig = require('kcd-scripts/config').jest
+
+module.exports = Object.assign(jestConfig, {
+  preset: 'react-native',
+  testEnvironment: 'node',
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!react-native)/'],
+  rootDir: '../../',
+  roots: ['.'],
+  testMatch: ['<rootDir>/other/react-native/__tests__/**/*.js?(x)'],
+})

package.json

@@ -18,7 +18,7 @@
     "test:ssr": "kcd-scripts test --config other/ssr/jest.config.js --no-watch",
     "test:update": "npm run test:cover -s -- --updateSnapshot",
     "test:ts": "tsc --noEmit -p ./tsconfig.json",
-    "test:build": "kcd-scripts test --config other/misc-tests/jest.config.js --no-watch",
+    "test:build": "jest --projects other/misc-tests other/react-native",
     "test:cypress:dev": "npm-run-all --parallel --race storybook cy:open",
     "pretest:cypress": "npm run storybook:build --silent",
     "test:cypress": "npm-run-all --parallel --race storybook:serve cy:run",
@@ -61,6 +61,9 @@
   },
   "devDependencies": {
     "@storybook/react": "^3.3.14",
+    "babel-jest": "^22.2.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react-native": "^4.0.0",
     "cross-env": "^5.1.3",
     "cypress": "^2.0.3",
     "enzyme": "^3.3.0",
@@ -76,6 +79,7 @@
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-native": "^0.53.0",
     "react-test-renderer": "^16.2.0",
     "serve": "^6.4.11",
     "typescript": "^2.7.2"