diff --git a/README.md b/README.md
index 8d62414..5c6a7fb 100644
--- a/README.md
+++ b/README.md
@@ -30,20 +30,22 @@
+
## 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();
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.
diff --git a/extend-expect.d.ts b/extend-expect.d.ts
new file mode 100644
index 0000000..f0ce3a1
--- /dev/null
+++ b/extend-expect.d.ts
@@ -0,0 +1,13 @@
+import { ReactTestInstance } from 'react-test-renderer';
+
+declare namespace jest {
+ interface Matchers {
+ 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;
+ }
+}
diff --git a/jest.config.js b/jest.config.js
index 18a55c9..cf05928 100644
--- a/jest.config.js
+++ b/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: ['/setup-tests.js'],
collectCoverageFrom: ['src/**/*.+(js|jsx|ts|tsx)'],
testMatch: ['**/__tests__/**/*.+(js|jsx|ts|tsx)'],
diff --git a/package.json b/package.json
index 38deaaa..627ef0e 100644
--- a/package.json
+++ b/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,7 +9,7 @@
"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",
@@ -17,7 +17,8 @@
},
"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,7 +44,7 @@
"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",
@@ -50,9 +52,8 @@
"semantic-release": "^15.13.3"
},
"peerDependencies": {
- "native-testing-library": ">=1.2.0",
"react": "*",
- "react-native": "*"
+ "react-native": ">0.55"
},
"husky": {
"hooks": {
diff --git a/setup-tests.js b/setup-tests.js
index 4e9ceae..79323c1 100644
--- a/setup-tests.js
+++ b/setup-tests.js
@@ -1,4 +1,5 @@
import { plugins } from 'pretty-format';
+
import './src/extend-expect';
expect.addSnapshotSerializer(plugins.ConvertAnsi);
diff --git a/src/__tests__/to-be-disabled.js b/src/__tests__/to-be-disabled.js
index 585b91b..f049344 100644
--- a/src/__tests__/to-be-disabled.js
+++ b/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(
@@ -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(
-
+
highlight
@@ -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,7 +86,7 @@ test('.toBeEnabled', () => {
});
test('matcher misses', () => {
- const { queryByTestId, queryByText } = render(
+ const { queryByTestId, queryByTitle } = render(
@@ -98,5 +94,5 @@ test('matcher misses', () => {
);
expect(() => expect(queryByTestId('enabled')).toBeDisabled()).toThrowError();
- expect(() => expect(queryByText('disabled')).toBeEnabled()).toThrowError();
+ expect(() => expect(queryByTitle('disabled')).toBeEnabled()).toThrowError();
});
diff --git a/src/__tests__/to-have-prop.js b/src/__tests__/to-have-prop.js
index 2cec068..0638d76 100644
--- a/src/__tests__/to-have-prop.js
+++ b/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(
text
@@ -12,20 +12,19 @@ test('.toHaveProp', () => {
,
);
- 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),
diff --git a/src/to-be-disabled.js b/src/to-be-disabled.js
index 0ec7b5d..92488bc 100644
--- a/src/to-be-disabled.js
+++ b/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',