feat: support breaking changes for native-testing-library preset (#2)

README.md

@@ -30,20 +30,22 @@
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
 ## Table of Contents
 
 - [The problem](#the-problem)
 - [This solution](#this-solution)
+- [Compatibility](#compatibility)
 - [Installation](#installation)
 - [Usage](#usage)
 - [Matchers](#matchers)
   - [`toBeDisabled`](#tobedisabled)
   - [`toBeEnabled`](#tobeenabled)
   - [`toBeEmpty`](#tobeempty)
-  - [`toContainElement(element)`](#tocontainelementelement)
-  - [`toHaveProp(prop, value)`](#tohavepropprop-value)
-  - [`toHaveTextContent(text)`](#tohavetextcontenttext)
-  - [`toHaveStyle(styles)`](#tohavestylestyles)
+  - [`toContainElement`](#tocontainelementelement)
+  - [`toHaveProp`](#tohavepropprop-value)
+  - [`toHaveTextContent`](#tohavetextcontenttext)
+  - [`toHaveStyle`](#tohavestylestyles)
 - [Inspiration](#inspiration)
 - [Other solutions](#other-solutions)
 - [Contributors](#contributors)
@@ -53,7 +55,7 @@
 ## The problem
 
 You want to use [jest](https://facebook.github.io/jest/) to write tests that assert various things
-about the state of a React Native tree. As part of that goal, you want to avoid all the repetitive
+about the state of a React Native app. As part of that goal, you want to avoid all the repetitive
 patterns that arise in doing so like checking for a native element's props, its text content, its
 styles, and more.
 
@@ -62,6 +64,14 @@ styles, and more.
 The `jest-native` library provides a set of custom jest matchers that you can use to extend jest.
 These will make your tests more declarative, clear to read and to maintain.
 
+## Compatibility
+
+These matchers should, for the most part, be agnostic enough to work with any React Native testing
+utilities, but they are primarily intended to be used with
+[native-testing-library](https://github.com/testing-library/native-testing-library). Any issues
+raised with existing matchers or any newly proposed matchers must be viewed through compatibility
+with that library and its guiding principles first.
+
 ## Installation
 
 This module should be installed as one of your project's `devDependencies`:
@@ -162,10 +172,10 @@ const { getByTestId } = render(<View testID="empty" />);
 expect(getByTestId('empty')).toBeEmpty();
 ```
 
-### `toContainElement(element)`
+### `toContainElement`
 
-```javascript
-toContainElement();
+```typescript
+toContainElement(element: ReactTestInstance | null);
 ```
 
 Check if an element contains another element as a descendant. Again, will only work for native
@@ -195,10 +205,10 @@ expect(parent).toContainElement(child);
 expect(parent).not.toContainElement(grandparent);
 ```
 
-### `toHaveProp(prop, value)`
+### `toHaveProp`
 
-```javascript
-toHaveProp(prop, value);
+```typescript
+toHaveProp(prop: string, value?: any);
 ```
 
 Check that an element has a given prop. Only works for native elements, so this is similar to
@@ -224,10 +234,10 @@ expect(queryByTestId('button')).not.toHaveProp('disabled');
 expect(queryByTestId('button')).not.toHaveProp('title', 'ok');
 ```
 
-### `toHaveTextContent(text)`
+### `toHaveTextContent`
 
-```javascript
-toHaveTextContent(text);
+```typescript
+toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean });
 ```
 
 Check if an element has the supplied text.
@@ -248,10 +258,10 @@ expect(queryByTestId('count-value')).toHaveTextContent(/2/);
 expect(queryByTestId('count-value')).not.toHaveTextContent('21');
 ```
 
-### `toHaveStyle(styles)`
+### `toHaveStyle`
 
 ```javascript
-toHaveStyle(styles);
+toHaveStyle(style: object[] | object);
 ```
 
 Check if an element has the supplied styles.

extend-expect.d.ts

@@ -0,0 +1,13 @@
+import { ReactTestInstance } from 'react-test-renderer';
+
+declare namespace jest {
+  interface Matchers<R> {
+    toBeDisabled(): R;
+    toContainElement(element: ReactTestInstance | null): R;
+    toBeEmpty(): R;
+    toHaveProp(attr: string, value?: any): R;
+    toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R;
+    toBeEnabled(): R;
+    toHaveStyle(style: object[] | object): R;
+  }
+}

jest.config.js

@@ -1,8 +1,7 @@
 const ignores = ['/node_modules/', '/__tests__/helpers/', '__mocks__'];
 
 module.exports = {
-  preset: 'react-native',
-  transformIgnorePatterns: ['node_modules/(?!(react-native.*|@?react-navigation.*)/)'],
+  preset: 'native-testing-library',
   setupFilesAfterEnv: ['<rootDir>/setup-tests.js'],
   collectCoverageFrom: ['src/**/*.+(js|jsx|ts|tsx)'],
   testMatch: ['**/__tests__/**/*.+(js|jsx|ts|tsx)'],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jest-native",
-  "version": "0.0.0-semantically-released",
+  "version": "2.0.0-beta.3",
   "description": "Custom jest matchers to test the state of React Native",
   "main": "dist/index.js",
   "scripts": {
@@ -9,15 +9,16 @@
     "commit:all": "npm run commit:add && npm run commit",
     "readme:toc": "doctoc README.md --maxlevel 3 --title '## Table of Contents'",
     "test": "jest",
-    "pretty-quick": "pretty-quick --staged --pattern '**/*.(js|jsx|ts|tsx)'",
+    "pretty-quick": "pretty-quick --staged",
     "prepublishOnly": "rm -rf dist; babel src --out-dir dist --ignore 'src/__tests__/*'",
     "semantic-release": "semantic-release",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch --coverage"
   },
   "files": [
     "dist",
-    "extend-expect.js"
+    "extend-expect.js",
+    "extend-expect.d.ts"
   ],
   "keywords": [
     "testing",
@@ -31,6 +32,7 @@
     "jest-matcher-utils": "^24.0.0",
     "ramda": "^0.26.1",
     "pretty-format": "^24.0.0",
+    "react-test-renderer": "^16.8.0",
     "redent": "^2.0.0"
   },
   "devDependencies": {
@@ -42,17 +44,16 @@
     "husky": "^1.3.1",
     "jest": "^24.7.1",
     "metro-react-native-babel-preset": "^0.52.0",
-    "native-testing-library": "1.x",
+    "native-testing-library": "^3.0.0-beta.3",
     "prettier": "^1.16.4",
     "pretty-quick": "^1.10.0",
     "react": "16.8.3",
     "react-native": "^0.59.3",
     "semantic-release": "^15.13.3"
   },
   "peerDependencies": {
-    "native-testing-library": ">=1.2.0",
     "react": "*",
-    "react-native": "*"
+    "react-native": ">0.55"
   },
   "husky": {
     "hooks": {

setup-tests.js

@@ -1,4 +1,5 @@
 import { plugins } from 'pretty-format';
+
 import './src/extend-expect';
 
 expect.addSnapshotSerializer(plugins.ConvertAnsi);

src/__tests__/to-be-disabled.js

@@ -10,7 +10,7 @@ import {
 import { render } from 'native-testing-library';
 
 test('.toBeDisabled', () => {
-  const { queryByTestId, queryByText } = render(
+  const { queryByTestId, queryByText, queryByTitle } = render(
     <View disabled testID="view">
       <Button disabled testID="button" title="button" />
       <TouchableHighlight disabled testID="highlight">
@@ -28,10 +28,8 @@ test('.toBeDisabled', () => {
   expect(queryByTestId('view')).toBeDisabled();
   expect(() => expect(queryByTestId('view')).not.toBeDisabled()).toThrowError();
 
-  expect(queryByTestId('button')).toBeDisabled();
-  expect(queryByText('button')).toBeDisabled();
-  expect(() => expect(queryByTestId('button')).not.toBeDisabled()).toThrowError();
-  expect(() => expect(queryByText('button')).not.toBeDisabled()).toThrowError();
+  expect(queryByTitle('button')).toBeDisabled();
+  expect(() => expect(queryByTitle('button')).not.toBeDisabled()).toThrowError();
 
   expect(queryByTestId('highlight')).toBeDisabled();
   expect(queryByText('highlight')).toBeDisabled();
@@ -50,9 +48,9 @@ test('.toBeDisabled', () => {
 });
 
 test('.toBeEnabled', () => {
-  const { queryByTestId, queryByText } = render(
+  const { queryByTestId, queryByText, queryByTitle } = render(
     <View testID="view">
-      <Button testID="button" title="button" />
+      <Button title="button" />
       <TouchableHighlight testID="highlight">
         <Text>highlight</Text>
       </TouchableHighlight>
@@ -68,10 +66,8 @@ test('.toBeEnabled', () => {
   expect(queryByTestId('view')).toBeEnabled();
   expect(() => expect(queryByTestId('view')).not.toBeEnabled()).toThrowError();
 
-  expect(queryByTestId('button')).toBeEnabled();
-  expect(queryByText('button')).toBeEnabled();
-  expect(() => expect(queryByTestId('button')).not.toBeEnabled()).toThrowError();
-  expect(() => expect(queryByText('button')).not.toBeEnabled()).toThrowError();
+  expect(queryByTitle('button')).toBeEnabled();
+  expect(() => expect(queryByTitle('button')).not.toBeEnabled()).toThrowError();
 
   expect(queryByTestId('highlight')).toBeEnabled();
   expect(queryByText('highlight')).toBeEnabled();
@@ -90,13 +86,13 @@ test('.toBeEnabled', () => {
 });
 
 test('matcher misses', () => {
-  const { queryByTestId, queryByText } = render(
+  const { queryByTestId, queryByTitle } = render(
     <View testID="view">
       <Button testID="enabled" title="enabled" />
       <Button disabled testID="disabled" title="disabled" />
     </View>,
   );
 
   expect(() => expect(queryByTestId('enabled')).toBeDisabled()).toThrowError();
-  expect(() => expect(queryByText('disabled')).toBeEnabled()).toThrowError();
+  expect(() => expect(queryByTitle('disabled')).toBeEnabled()).toThrowError();
 });

src/__tests__/to-have-prop.js

@@ -3,7 +3,7 @@ import { Button, Text, View } from 'react-native';
 import { render } from 'native-testing-library';
 
 test('.toHaveProp', () => {
-  const { debug, queryByTestId } = render(
+  const { queryByTestId } = render(
     <View>
       <Text allowFontScaling={false} testID="text">
         text
@@ -12,20 +12,19 @@ test('.toHaveProp', () => {
     </View>,
   );
 
-  expect(queryByTestId('button')).toHaveProp('accessibilityStates', ['disabled']);
-  expect(queryByTestId('button')).toHaveProp('accessible');
-  expect(queryByTestId('button')).not.toHaveProp('disabled');
-  expect(queryByTestId('button')).not.toHaveProp('title', 'ok');
+  expect(queryByTestId('button')).toHaveProp('disabled', true);
+  expect(queryByTestId('button')).toHaveProp('disabled');
+  expect(queryByTestId('button')).toHaveProp('title', 'ok');
 
   expect(queryByTestId('text')).toHaveProp('allowFontScaling', false);
   expect(queryByTestId('text')).not.toHaveProp('style');
 
   expect(() =>
-    expect(queryByTestId('button')).not.toHaveProp('accessibilityStates', ['disabled']),
+    expect(queryByTestId('button')).toHaveProp('accessibilityStates', ['disabled']),
   ).toThrowError();
-  expect(() => expect(queryByTestId('button')).not.toHaveProp('accessible')).toThrowError();
-  expect(() => expect(queryByTestId('button')).toHaveProp('disabled')).toThrowError();
-  expect(() => expect(queryByTestId('button')).toHaveProp('title', 'ok')).toThrowError();
+  expect(() => expect(queryByTestId('button')).toHaveProp('accessible')).toThrowError();
+  expect(() => expect(queryByTestId('button')).not.toHaveProp('disabled')).toThrowError();
+  expect(() => expect(queryByTestId('button')).not.toHaveProp('title', 'ok')).toThrowError();
 
   expect(() =>
     expect(queryByTestId('text')).not.toHaveProp('allowFontScaling', false),

src/to-be-disabled.js

@@ -5,6 +5,7 @@ import { checkReactElement, getType, printElement } from './utils';
 
 // Elements that support 'disabled'
 const DISABLE_TYPES = [
+  'Button',
   'Slider',
   'Switch',
   'Text',