jest-native - npm Package Compare versions

Comparing version 2.0.1 to 3.0.0

index.js

package.json

		{
		"name": "jest-native",
		"version": "2.0.1",
		"version": "3.0.0",
		"description": "Custom jest matchers to test the state of React Native",
		"main": "dist/index.js",
		"types": "extend-expect.d.ts",
		"scripts": {
		"commit": "git-cz",
		"commit:add": "git add .",
		"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",
		"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.d.ts"
		],
		"keywords": [
		"testing",
		"native-testing-library",
		"jest",
		"react-native"
		],
		"dependencies": {
		"chalk": "^2.4.1",
		"jest-diff": "^24.0.0",
		"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": {
		"@babel/cli": "7.2.3",
		"@babel/core": "7.4.0",
		"@babel/runtime": "7.4.0",
		"commitizen": "^3.0.7",
		"cz-conventional-changelog": "^2.1.0",
		"husky": "^1.3.1",
		"jest": "^24.7.1",
		"metro-react-native-babel-preset": "^0.52.0",
		"native-testing-library": "^3.0.0",
		"prettier": "^1.16.4",
		"pretty-quick": "^1.10.0",
		"react": "16.8.3",
		"react-native": "^0.59.3",
		"semantic-release": "^15.13.3"
		},
		"peerDependencies": {
		"react": "*",
		"react-native": ">0.55"
		},
		"husky": {
		"hooks": {
		"pre-commit": "npm run pretty-quick"
		}
		},
		"prettier": {
		"printWidth": 100,
		"singleQuote": true,
		"trailingComma": "all",
		"tabWidth": 2,
		"proseWrap": "always"
		},
		"release": {
		"branch": "master",
		"plugins": [
		"@semantic-release/commit-analyzer",
		"@semantic-release/release-notes-generator",
		"@semantic-release/npm",
		"@semantic-release/github"
		]
		},
		"config": {
		"commitizen": {
		"path": "./node_modules/cz-conventional-changelog"
		}
		},
		"repository": {
		"type": "git",
		"url": "git+https://github.com/testing-library/jest-native.git"
		},
		"author": "Brandon Carroll",
		"license": "MIT",
		"bugs": {
		"url": "https://github.com/testing-library/jest-native/issues"
		},
		"homepage": "https://github.com/testing-library/jest-native#readme"
		"main": "index.js",
		"files": ["index.js"],
		"author": "Brandon Carroll"
		}

314

README.md

		@@ -1,313 +0,1 @@
		<div align="center">
		<h1>jest-native</h1>

		<a href="https://www.joypixels.com/emoji/1f985">
		<img
		height="80"
		width="80"
		alt="goat"
		src="https://raw.githubusercontent.com/testing-library/jest-native/master/other/eagle.png"
		/>
		</a>

		<p>Custom jest matchers to test the state of React Native.</p>
		</div>

		<hr />

		[![Build Status](https://travis-ci.org/testing-library/jest-native.svg?branch=master)](https://travis-ci.org/testing-library/jest-native)
		[![Code Coverage](https://img.shields.io/codecov/c/github/testing-library/jest-native.svg?style=flat-square)](https://codecov.io/github/testing-library/jest-native)
		[![version](https://img.shields.io/npm/v/jest-native.svg?style=flat-square)](https://www.npmjs.com/package/jest-native)
		[![downloads](https://img.shields.io/npm/dm/jest-native.svg?style=flat-square)](http://www.npmtrends.com/jest-native)
		[![MIT License](https://img.shields.io/npm/l/jest-native.svg?style=flat-square)](https://github.com/testing-library/jest-native/blob/master/LICENSE)

		[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)
		[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
		[![Code of Conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](https://github.com/testing-library/jest-native/blob/master/CODE_OF_CONDUCT.md)

		[![Watch on GitHub](https://img.shields.io/github/watchers/testing-library/jest-native.svg?style=social)](https://github.com/testing-library/jest-native/watchers)
		[![Star on GitHub](https://img.shields.io/github/stars/testing-library/jest-native.svg?style=social)](https://github.com/testing-library/jest-native/stargazers)

		<!-- 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`](#tocontainelementelement)
		- [`toHaveProp`](#tohavepropprop-value)
		- [`toHaveTextContent`](#tohavetextcontenttext)
		- [`toHaveStyle`](#tohavestylestyles)
		- [Inspiration](#inspiration)
		- [Other solutions](#other-solutions)
		- [Contributors](#contributors)

		<!-- END doctoc generated TOC please keep comment here to allow auto update -->

		## 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 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.

		## This solution

		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`:

		```
		npm install --save-dev jest-native
		```

		You will need `native-testing-library`, `react`, and `react-native` installed in order to use this
		package.

		## Usage

		Import `jest-native/extend-expect` once (for instance in your
		[tests setup file](https://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string))
		and you're good to go:

		```javascript
		import 'jest-native/extend-expect';
		```

		Alternatively, you can selectively import only the matchers you intend to use, and extend jest's
		`expect` yourself:

		```javascript
		import { toBeEmpty, toHaveTextContent } from 'jest-native';

		expect.extend({ toBeEmpty, toHaveTextContent });
		```

		## Matchers

		`jest-native` has only been tested to work with `native-testing-library`. Keep in mind that these
		queries will only work on UI elements that bridge to native.

		### `toBeDisabled`

		```javascript
		toBeDisabled();
		```

		Check whether or not an element is disabled from a user perspective.

		This matcher will check if the element or its parent has a `disabled` prop, or if it has
		`accessibilityStates={['disabled']}`.

		#### Examples

		```javascript
		const { getByTestId } = render(
		<View>
		<Button disabled testID="button" title="submit" onPress={e => e} />
		<TextInput accessibilityStates={['disabled']} testID="input" value="text" />
		</View>,
		);

		expect(getByTestId('button')).toBeDisabled();
		expect(getByTestId('input')).toBeDisabled();
		```

		### `toBeEnabled`

		```javascript
		toBeEnabled();
		```

		Check whether or not an element is enabled from a user perspective.

		Works similarly to `expect().not.toBeDisabled()`.

		#### Examples

		```javascript
		const { getByTestId } = render(
		<View>
		<Button testID="button" title="submit" onPress={e => e} />
		<TextInput testID="input" value="text" />
		</View>,
		);

		expect(getByTestId('button')).toBeEnabled();
		expect(getByTestId('input')).toBeEnabled();
		```

		### `toBeEmpty`

		```javascript
		toBeEmpty();
		```

		Check that the given element has no content.

		#### Examples

		```javascript
		const { getByTestId } = render(<View testID="empty" />);

		expect(getByTestId('empty')).toBeEmpty();
		```

		### `toContainElement`

		```typescript
		toContainElement(element: ReactTestInstance \| null);
		```

		Check if an element contains another element as a descendant. Again, will only work for native
		elements.

		#### Examples

		```javascript
		const { queryByTestId } = render(
		<View testID="grandparent">
		<View testID="parent">
		<View testID="child" />
		</View>
		<Text testID="text-element" />
		</View>,
		);

		const grandparent = queryByTestId('grandparent');
		const parent = queryByTestId('parent');
		const child = queryByTestId('child');
		const textElement = queryByTestId('text-element');

		expect(grandparent).toContainElement(parent);
		expect(grandparent).toContainElement(child);
		expect(grandparent).toContainElement(textElement);
		expect(parent).toContainElement(child);
		expect(parent).not.toContainElement(grandparent);
		```

		### `toHaveProp`

		```typescript
		toHaveProp(prop: string, value?: any);
		```

		Check that an element has a given prop. Only works for native elements, so this is similar to
		checking for attributes in the DOM.

		You can optionally check that the attribute has a specific expected value.

		#### Examples

		```javascript
		const { queryByTestId } = render(
		<View>
		<Text allowFontScaling={false} testID="text">
		text
		</Text>
		<Button disabled testID="button" title="ok" />
		</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');
		```

		### `toHaveTextContent`

		```typescript
		toHaveTextContent(text: string \| RegExp, options?: { normalizeWhitespace: boolean });
		```

		Check if an element has the supplied text.

		This will perform a partial, case-sensitive match when a string match is provided. To perform a
		case-insensitive match, you can use a `RegExp` with the `/i` modifier.

		To enforce matching the complete text content, pass a `RegExp`.

		#### Examples

		```javascript
		const { queryByTestId } = render(<Text testID="count-value">2</Text>);

		expect(queryByTestId('count-value')).toHaveTextContent('2');
		expect(queryByTestId('count-value')).toHaveTextContent(2);
		expect(queryByTestId('count-value')).toHaveTextContent(/2/);
		expect(queryByTestId('count-value')).not.toHaveTextContent('21');
		```

		### `toHaveStyle`

		```javascript
		toHaveStyle(style: object[] \| object);
		```

		Check if an element has the supplied styles.

		You can pass either an object of React Native style properties, or an array of objects with style
		properties. You cannot pass properties from a React Native stylesheet..

		#### Examples

		```javascript
		const styles = StyleSheet.create({ text: { fontSize: 16 } });

		const { queryByText } = render(
		<Text style={[{ color: 'black', fontWeight: '600' }, styles.text]}>Hello World</Text>,
		);

		expect(queryByText('Hello World')).toHaveStyle({ color: 'black', fontWeight: '600', fontSize: 16 });
		expect(queryByText('Hello World')).toHaveStyle({ color: 'black' });
		expect(queryByText('Hello World')).toHaveStyle({ fontWeight: '600' });
		expect(queryByText('Hello World')).toHaveStyle({ fontSize: 16 });
		expect(queryByText('Hello World')).toHaveStyle([{ color: 'black' }, { fontWeight: '600' }]);
		expect(queryByText('Hello World')).not.toHaveStyle({ color: 'white' });
		```

		## Inspiration

		This library was made to be a companion for
		[native-testing-library](https://github.com/testing-library/native-testing-library).

		It was inspired by [jest-dom](https://github.com/gnapse/jest-dom/), the companion library for
		[dom-testing-library](https://github.com/kentcdodds/dom-testing-library/). We emulated as many of
		those helpers as we could while keeping in mind the guiding principles.

		## Other solutions

		None known, [you can add the first](http://makeapullrequest.com)!

		## Contributors

		Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

		<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
		<!-- prettier-ignore -->
		<table><tr><td align="center"><a href="https://github.com/bcarroll22"><img src="https://avatars2.githubusercontent.com/u/11020406?v=4" width="100px;" alt="Brandon Carroll"/><br /><sub><b>Brandon Carroll</b></sub></a><br /><a href="https://github.com/testing-library/jest-native/commits?author=bcarroll22" title="Code">💻</a> <a href="https://github.com/testing-library/jest-native/commits?author=bcarroll22" title="Documentation">📖</a> <a href="#infra-bcarroll22" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/testing-library/jest-native/commits?author=bcarroll22" title="Tests">⚠️</a></td><td align="center"><a href="http://santiagomartin.dev"><img src="https://avatars2.githubusercontent.com/u/7255298?v=4" width="100px;" alt="Santi"/><br /><sub><b>Santi</b></sub></a><br /><a href="https://github.com/testing-library/jest-native/commits?author=SantiMA10" title="Code">💻</a></td></tr></table>

		<!-- ALL-CONTRIBUTORS-LIST:END -->

		This project follows the [all-contributors](https://github.com/all-contributors/all-contributors)
		specification. Contributions of any kind welcome!
		# `jest-native` has moved to `@testing-library/jest-native`. Please uninstall `jest-native` and install `@testing-library/jest-native` instead, or use an older version of `jest-native`. Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260 Thanks! :)

CHANGELOG.md

dist/extend-expect.js

dist/index.js

dist/to-be-disabled.js

dist/to-be-empty.js

dist/to-contain-element.js

dist/to-have-prop.js

dist/to-have-style.js

dist/to-have-text-content.js

dist/utils.js

extend-expect.d.ts

extend-expect.js

LICENSE

jest-native - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes