Skip to content

Commit 520355a

Browse files
committed
change shallow output to be more future proof
1 parent c4a0dd7 commit 520355a

File tree

2 files changed

+11
-7
lines changed

2 files changed

+11
-7
lines changed

README.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,20 +39,21 @@ Deeply render given React component and returns helpers to query the output. For
3939
```jsx
4040
import { render } from 'react-native-testing-library';
4141

42-
const { ... } = render(<Component />);
42+
const { getByTestId, instance /*...*/ } = render(<Component />);
4343
```
4444

45-
You'll likely want to wrap `render` with some React Context Providers, creating your custom render. [Follow this great guide on how to set this up](https://github.com/kentcdodds/react-testing-library#custom-render).
45+
When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases it's convenient to create your custom `render` method. [Follow this great guide on how to set this up](https://github.com/kentcdodds/react-testing-library#custom-render).
4646

4747
## `shallow`
4848

49-
Shallowly render given React copmonents. Since it (currently) doesn't return helpers to query the output, it's mostly adviced to used for snapshot testing.
49+
Shallowly render given React copmonent. Since it doesn't return helpers to query the output, it's mostly adviced to used for snapshot testing (short snapshots are best for code reviewers).
5050

5151
```jsx
5252
import { shallow } from 'react-native-testing-library';
5353

5454
test('Component has a structure', () => {
55-
expect(shallow(<Component />)).toMatchSnapshot();
55+
const { output } = shallow(<Component />);
56+
expect(output).toMatchSnapshot();
5657
});
5758
```
5859

src/index.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,11 @@ export const shallow = (instance: ReactTestInstance | React.Element<*>) => {
6060
} else {
6161
renderer.render(React.createElement(instance.type, instance.props));
6262
}
63-
const result = renderer.getRenderOutput();
63+
const output = renderer.getRenderOutput();
6464

65-
return result;
65+
return {
66+
output,
67+
};
6668
};
6769

6870
/**
@@ -72,9 +74,10 @@ export const debug = (
7274
instance: ReactTestInstance | React.Element<*>,
7375
message?: any
7476
) => {
77+
const { output } = shallow(instance);
7578
// eslint-disable-next-line no-console
7679
console.log(
77-
prettyFormat(shallow(instance), {
80+
prettyFormat(output, {
7881
plugins: [plugins.ReactTestComponent, plugins.ReactElement],
7982
}),
8083
message

0 commit comments

Comments
 (0)