Replace mocha with jest

Author: mrlaessig

.babelrc

@@ -18,12 +18,14 @@
 
 
   "env": {
-    "es6": true
+    "es6": true,
+    "jest/globals": true,
   },
 
 
   "plugins": [
-    "react"
+    "jest",
+    "react",
   ],
 
 

.eslintrc

@@ -36,3 +36,4 @@ coverage
 .nyc_output
 
 package-lock.json
+yarn-error.log

.gitignore

@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "singleQuote": true,
+}

.prettierrc

@@ -1,74 +1,72 @@
-'use strict';
-
-import Autocomplete from '../';
 import React from 'react';
-import { describe, it } from 'mocha';
-import { expect } from 'chai';
-import { shallow } from 'enzyme';
-import {
-  ListView,
-  Text
-} from 'react-native';
+import renderer from 'react-test-renderer';
+import { FlatList, Text, TextInput } from 'react-native';
+import Autocomplete from '..';
 
 const ITEMS = [
-  "A New Hope",
-  "The Empire Strikes Back",
-  "Return of the Jedi",
-  "The Phantom Menace",
-  "Attack of the Clones",
-  "Revenge of the Sith"
+  'A New Hope',
+  'The Empire Strikes Back',
+  'Return of the Jedi',
+  'The Phantom Menace',
+  'Attack of the Clones',
+  'Revenge of the Sith'
 ];
 
-function overrideGetRowCount(autocomplete, data) {
-  const DataSourcePrototype = ListView.DataSource.prototype;
-  autocomplete.state().dataSource = Object.assign(DataSourcePrototype, {
-    getRowCount: () => data.length
-  });
-}
+const keyExtractor = (item, index) => `key-${index}`;
 
 describe('<AutocompleteInput />', () => {
   it('Should hide suggestion list on initial render', () => {
-    const autocomplete = shallow(<Autocomplete data={[]} />);
-    expect(autocomplete.length).to.equal(1);
-    expect(autocomplete.childAt(1).children()).to.have.length(0);
+    const r = renderer.create(<Autocomplete data={[]} />);
+    const autocomplete = r.root;
+
+    expect(autocomplete.findAllByType(FlatList)).toHaveLength(0);
   });
 
   it('Should show suggestion list when data gets updated with length > 0', () => {
-    const autocomplete = shallow(<Autocomplete data={[]} />);
-    overrideGetRowCount(autocomplete, ITEMS);
+    const testRenderer = renderer.create(<Autocomplete data={[]} />);
+    const autocomplete = testRenderer.root;
+
+    expect(autocomplete.findAllByType(FlatList)).toHaveLength(0);
 
-    autocomplete.setProps({ data: ITEMS });
-    expect(autocomplete.childAt(1).children()).to.have.length(1);
+    testRenderer.update(<Autocomplete data={ITEMS} keyExtractor={keyExtractor} />);
+
+    const list = autocomplete.findByType(FlatList);
+    expect(list.props.data).toEqual(ITEMS);
+
+    const texts = list.findAllByType(Text);
+    expect(texts).toHaveLength(ITEMS.length);
   });
 
   it('Should hide suggestion list when data gets updates with length < 1', () => {
-    const autocomplete = shallow(<Autocomplete data={[]} />);
-    overrideGetRowCount(autocomplete, []);
+    const props = { data: ITEMS, keyExtractor };
+    const testRenderer = renderer.create(<Autocomplete {...props} />);
+    const autocomplete = testRenderer.root;
 
-    autocomplete.setProps({ data: [] });
-    expect(autocomplete.childAt(1).children()).to.have.length(0);
+    expect(autocomplete.findAllByType(FlatList)).toHaveLength(1);
+    testRenderer.update(<Autocomplete data={[]} />);
+
+    expect(autocomplete.findAllByType(FlatList)).toHaveLength(0);
   });
 
   it('should render custom text input', () => {
     const text = 'Custom Text Input';
-    const autocomplete = shallow(
-      <Autocomplete data={[]} foo="bar" renderTextInput={props =>
-          <Text {...props}>{text}</Text>
-        }
-      />
+    const testRenderer = renderer.create(
+      <Autocomplete data={[]} foo="bar" renderTextInput={props => <Text {...props}>{text}</Text>} />
     );
 
-    const customInput = autocomplete.find('Text');
-    expect(autocomplete.find('TextInput')).to.have.length(0);
-    expect(customInput.children().get(0)).to.equal(text);
-    expect(customInput.prop('foo')).to.equal('bar');
+    const autocomplete = testRenderer.root;
+    const customTextInput = autocomplete.findByType(Text);
+
+    expect(customTextInput.children[0].children).toEqual([text]);
+    expect(autocomplete.findAllByType(TextInput)).toHaveLength(0);
   });
 
   it('should render default <TextInput /> if no custom one is supplied', () => {
-    const autocomplete = shallow(<Autocomplete data={[]} foo="bar" />);
+    const props = { foo: 'bar' };
+    const testRenderer = renderer.create(<Autocomplete data={[]} {...props} />);
+    const autocomplete = testRenderer.root;
+    const textInput = autocomplete.findByType(TextInput);
 
-    const textInput = autocomplete.childAt(0).children().first();
-    expect(textInput.name()).to.equal('TextInput');
-    expect(textInput.prop('foo')).to.equal('bar');
+    expect(textInput.props).toEqual(expect.objectContaining(props));
   });
 });

__tests__/autocomplete-test.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset']
+};

babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'react-native',
+  verbose: true
+};

jest.config.js

@@ -3,14 +3,10 @@
   "version": "4.1.0",
   "description": "Pure javascript autocomplete input for react-native",
   "main": "index.js",
-  "options": {
-    "mocha": "--require react-native-mock/mock.js --require @babel/register ./__tests__/**/*.js"
-  },
   "scripts": {
-    "coverage": "node_modules/.bin/nyc mocha $npm_package_options_mocha && node_modules/.bin/nyc report --reporter=lcov",
-    "lint": "eslint ./*.js ./example/*.js",
     "test": "npm run lint && npm run testonly",
-    "testonly": "mocha $npm_package_options_mocha"
+    "lint": "eslint ./*.js ./example/*.js ./__tests__/*.js",
+    "testonly": "jest"
   },
   "repository": {
     "type": "git",
@@ -34,27 +30,23 @@
     "url": "https://github.com/l-urence/react-native-autocomplete-input/issues"
   },
   "homepage": "https://github.com/l-urence/react-native-autocomplete-input#readme",
-  "dependencies": {},
   "devDependencies": {
-    "@babel/register": "^7.4.4",
-    "babel-eslint": "^7.1.1",
-    "chai": "^3.5.0",
-    "enzyme": "^2.3.0",
-    "eslint": "^6.0.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-babel": "^5.3.0",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.14.0",
-    "estraverse-fb": "^1.3.1",
-    "metro-react-native-babel-preset": "^0.54.1",
-    "mocha": "^6.1.4",
-    "nyc": "^10.1.2",
-    "react": "~15.5.4",
-    "react-addons-test-utils": "^15.6.2",
-    "react-dom": "~15.5.4",
-    "react-native": "0.59.8",
-    "react-native-mock": "^0.3.1",
-    "sinon": "^1.17.4"
+    "@babel/core": "^7.5.5",
+    "@babel/runtime": "^7.5.5",
+    "@react-native-community/eslint-config": "^0.0.5",
+    "babel-jest": "^24.8.0",
+    "eslint": "^6.1.0",
+    "eslint-config-airbnb": "^17.1.1",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jest": "^22.13.6",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "jest": "^24.8.0",
+    "metro-react-native-babel-preset": "^0.55.0",
+    "react": "^16.8.6",
+    "react-native": "^0.60.4",
+    "react-test-renderer": "16.8.6"
+  },
+  "jest": {
+    "preset": "react-native"
   }
 }