react-native-testing-library
Advanced tools
Comparing version 1.0.0 to 1.1.0
{ | ||
"name": "react-native-testing-library", | ||
"version": "1.0.0", | ||
"version": "1.1.0", | ||
"description": "Simple React Native testing utilities helping you write better tests with less effort", | ||
@@ -14,3 +14,3 @@ "main": "src/index.js", | ||
"@babel/runtime": "^7.1.2", | ||
"@callstack/eslint-config": "^2.0.0", | ||
"@callstack/eslint-config": "^3.0.0", | ||
"@types/react": "^16.4.15", | ||
@@ -21,8 +21,10 @@ "@types/react-test-renderer": "^16.0.3", | ||
"eslint": "^5.6.1", | ||
"flow-bin": "^0.82.0", | ||
"flow-bin": "^0.83.0", | ||
"jest": "^23.6.0", | ||
"metro-react-native-babel-preset": "^0.48.0", | ||
"pretty-format": "^23.6.0", | ||
"react": "^16.5.2", | ||
"react-test-renderer": "^16.5.2", | ||
"react": "16.6.0-alpha.8af6728", | ||
"react-native": "^0.57.3", | ||
"react-test-renderer": "16.6.0-alpha.8af6728", | ||
"strip-ansi": "^5.0.0", | ||
"typescript": "^3.1.1" | ||
@@ -35,5 +37,2 @@ }, | ||
}, | ||
"dependencies": { | ||
"react-is": "^16.5.2" | ||
}, | ||
"scripts": { | ||
@@ -44,3 +43,6 @@ "test": "jest", | ||
"lint": "eslint src --cache" | ||
}, | ||
"jest": { | ||
"preset": "react-native" | ||
} | ||
} |
@@ -139,2 +139,6 @@ # react-native-testing-library | ||
### `toJSON: () => ?ReactTestRendererJSON` | ||
Get the rendered component JSON representation, e.g. for snapshot testing. | ||
## `shallow` | ||
@@ -193,21 +197,2 @@ | ||
### `fireEvent.doublePress: (element: ReactTestInstance) => void` | ||
Invokes `doublePress` event handler on the element or parent element in the tree. | ||
```jsx | ||
import { TouchableOpacity, Text } from 'react-native'; | ||
import { render, fireEvent } from 'react-native-testing-library'; | ||
const onDoublePressMock = jest.fn(); | ||
const { getByTestId } = render( | ||
<TouchableOpacity onDoublePress={onDoublePressMock}> | ||
<Text testID="button-text">Click me</Text> | ||
</TouchableOpacity> | ||
); | ||
fireEvent.doublePress(getByTestId('button-text')); | ||
``` | ||
### `fireEvent.changeText: (element: ReactTestInstance, data?: *) => void` | ||
@@ -293,8 +278,48 @@ | ||
debug(<Component />); | ||
// console.log: | ||
// <View> | ||
// <Text>Component</Text> | ||
// </View> | ||
debug.shallow(<Component />); // an alias for `debug` | ||
``` | ||
logs: | ||
```jsx | ||
<TouchableOpacity | ||
activeOpacity={0.2} | ||
onPress={[Function bound fn]} | ||
> | ||
<TextComponent | ||
text="Press me" | ||
/> | ||
</TouchableOpacity> | ||
``` | ||
There's also `debug.deep` that renders deeply to stdout. | ||
```jsx | ||
import { debug } from 'react-native-testing-library'; | ||
debug.deep(<Component />); | ||
``` | ||
logs: | ||
```jsx | ||
<View | ||
accessible={true} | ||
isTVSelectable={true} | ||
onResponderGrant={[Function bound touchableHandleResponderGrant]} | ||
// ... more props | ||
style={ | ||
Object { | ||
\\"opacity\\": 1, | ||
} | ||
} | ||
> | ||
<Text> | ||
Press me | ||
</Text> | ||
</View> | ||
``` | ||
Optionally you can provide a string message as a second argument to `debug`, which will be displayed right after the component. | ||
## `flushMicrotasksQueue` | ||
@@ -301,0 +326,0 @@ |
// @flow | ||
/* eslint-disable no-console */ | ||
import * as React from 'react'; | ||
import prettyFormat, { plugins } from 'pretty-format'; // eslint-disable-line import/no-extraneous-dependencies | ||
import shallow from './shallow'; | ||
import render from './render'; | ||
@@ -9,3 +11,3 @@ /** | ||
*/ | ||
export default function debug( | ||
function debugShallow( | ||
instance: ReactTestInstance | React.Element<*>, | ||
@@ -15,9 +17,26 @@ message?: any | ||
const { output } = shallow(instance); | ||
// eslint-disable-next-line no-console | ||
console.log(format(output), message || ''); | ||
} | ||
/** | ||
* Log pretty-printed deep test component instance | ||
*/ | ||
function debugDeep(instance: React.Element<*>, message?: any) { | ||
const { toJSON } = render(instance); | ||
console.log(format(toJSON()), message || ''); | ||
} | ||
const format = input => | ||
prettyFormat(input, { | ||
plugins: [plugins.ReactTestComponent, plugins.ReactElement], | ||
highlight: true, | ||
}); | ||
const debug = debugShallow; | ||
debug.shallow = debugShallow; | ||
debug.deep = debugDeep; | ||
export default debug; |
@@ -11,3 +11,4 @@ // @flow | ||
if (element.parent === null) { | ||
// Do not bubble event to the root element | ||
if (element.parent === null || element.parent.parent === null) { | ||
throw new ErrorWithStack( | ||
@@ -37,4 +38,2 @@ `No handler function found for event: ${eventName}`, | ||
invokeEvent(element, 'press'); | ||
const doublePressHandler = (element: ReactTestInstance) => | ||
invokeEvent(element, 'doublePress'); | ||
const changeTextHandler = (element: ReactTestInstance, data?: *) => | ||
@@ -48,3 +47,2 @@ invokeEvent(element, 'changeText', data); | ||
fireEvent.press = pressHandler; | ||
fireEvent.doublePress = doublePressHandler; | ||
fireEvent.changeText = changeTextHandler; | ||
@@ -51,0 +49,0 @@ fireEvent.scroll = scrollHandler; |
@@ -23,3 +23,4 @@ // @flow | ||
unmount: renderer.unmount, | ||
toJSON: renderer.toJSON, | ||
}; | ||
} |
// @flow | ||
import * as React from 'react'; | ||
import { isValidElementType } from 'react-is'; | ||
import ShallowRenderer from 'react-test-renderer/shallow'; // eslint-disable-line import/no-extraneous-dependencies | ||
@@ -13,13 +12,8 @@ | ||
const renderer = new ShallowRenderer(); | ||
if (isValidElementType(instance)) { | ||
// $FlowFixMe - instance is React.Element<*> in this branch | ||
renderer.render(instance); | ||
} else { | ||
renderer.render(React.createElement(instance.type, instance.props)); | ||
} | ||
const output = renderer.getRenderOutput(); | ||
renderer.render(React.createElement(instance.type, instance.props)); | ||
return { | ||
output, | ||
output: renderer.getRenderOutput(), | ||
}; | ||
} |
@@ -8,3 +8,3 @@ // @flow | ||
const startTime = Date.now(); | ||
return new Promise<T>((resolve, reject) => { | ||
return new Promise((resolve, reject) => { | ||
const rejectOrRerun = error => { | ||
@@ -11,0 +11,0 @@ if (Date.now() - startTime >= timeout) { |
import * as React from 'react'; | ||
import { ReactTestInstance } from 'react-test-renderer'; | ||
import { ReactTestInstance, ReactTestRendererJSON } from 'react-test-renderer'; | ||
@@ -33,2 +33,3 @@ export interface GetByAPI { | ||
unmount(nextElement?: React.ReactElement<any>): void; | ||
toJSON(): ReactTestRendererJSON | null; | ||
} | ||
@@ -44,3 +45,2 @@ | ||
press: (element: ReactTestInstance) => any; | ||
doublePress: (element: ReactTestInstance) => any; | ||
changeText: (element: ReactTestInstance, data?: any) => any; | ||
@@ -56,2 +56,12 @@ scroll: (element: ReactTestInstance, data?: any) => any; | ||
export type DebugFunction = ( | ||
instance: ReactTestInstance | React.ReactElement<any>, | ||
message?: string | ||
) => void; | ||
export type DebugAPI = DebugFunction & { | ||
shallow: DebugFunction; | ||
deep: (instance: React.ReactElement<any>, message?: string) => void; | ||
}; | ||
export declare const render: ( | ||
@@ -65,6 +75,4 @@ component: React.ReactElement<any>, | ||
export declare const flushMicrotasksQueue: () => Promise<any>; | ||
export declare const debug: ( | ||
instance: ReactTestInstance | React.ReactElement<any> | ||
) => void; | ||
export declare const debug: DebugAPI; | ||
export declare const fireEvent: FireEventAPI; | ||
export declare const waitForElement: WaitForElementFunction; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
76918
3
1515
375
17
- Removedreact-is@^16.5.2
- Removedreact-is@16.13.1(transitive)