feat: add debug.deep and debug.shallow (#37)

<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->

### Summary

Adds API proposed by https://github.com/callstack/react-native-testing-library/pull/33#issuecomment-430302079.
Also component output is now highlighted:

<img width="259" alt="screenshot 2018-10-16 at 19 33 25" src="https://user-images.githubusercontent.com/5106466/47035614-c10efb80-d17a-11e8-99ac-00f648880008.png">


### Test plan

Added tests for `debug`.
This commit is contained in:
Michał Pierzchała
2018-10-16 21:45:56 +02:00
committed by GitHub
parent 03e2c4b0f2
commit 05db7bcaac
8 changed files with 190 additions and 9 deletions
+44 -4
View File
@@ -273,12 +273,52 @@ Log prettified shallowly rendered component or test instance (just like snapshot
import { debug } from 'react-native-testing-library';
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`
Wait for microtasks queue to flush. Useful if you want to wait for some promises with `async/await`.