From 29bd67e91e2a92f2ff90aacfc7ae5e713ad2263c Mon Sep 17 00:00:00 2001 From: Brandon Carroll Date: Sun, 28 Apr 2019 00:55:01 -0400 Subject: [PATCH] feat: support breaking changes for native-testing-library preset (#2) --- README.md | 42 ++++++++++++++++++++------------- extend-expect.d.ts | 13 ++++++++++ jest.config.js | 3 +-- package.json | 13 +++++----- setup-tests.js | 1 + src/__tests__/to-be-disabled.js | 22 +++++++---------- src/__tests__/to-have-prop.js | 17 +++++++------ src/to-be-disabled.js | 1 + 8 files changed, 66 insertions(+), 46 deletions(-) create mode 100644 extend-expect.d.ts 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(