Files
callstack__react-native-tes…/typings/__tests__/index.test.tsx
T
Michał Pierzchała 05db7bcaac 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`.
2018-10-16 21:45:56 +02:00

100 lines
3.1 KiB
TypeScript

import * as React from 'react';
import { ReactTestInstance } from 'react-test-renderer';
import {
render,
fireEvent,
shallow,
flushMicrotasksQueue,
debug,
waitForElement,
} from '../..';
const View = props => props.children;
const Text = props => props.children;
const TestComponent = () => (
<View>
<Text>Test component</Text>
</View>
);
const tree = render(<TestComponent />);
// getByAPI tests
const getByNameString: ReactTestInstance = tree.getByName('View');
const getByNameContructor: ReactTestInstance = tree.getByName(View);
const getByTextString: ReactTestInstance = tree.getByText('<View />');
const getByTextRegExp: ReactTestInstance = tree.getByText(/View/g);
const getByProps: ReactTestInstance = tree.getByProps({ value: 2 });
const getByTestId: ReactTestInstance = tree.getByTestId('test-id');
const getAllByNameString: Array<ReactTestInstance> = tree.getAllByName('View');
const getAllByNameConstructor: Array<ReactTestInstance> = tree.getAllByName(
View
);
const getAllByTextString: Array<ReactTestInstance> = tree.getAllByText(
'<View />'
);
const getAllByTextRegExp: Array<ReactTestInstance> = tree.getAllByText(/Text/g);
const getAllByProps: Array<ReactTestInstance> = tree.getAllByProps({
value: 2,
});
// queuryByAPI tests
const queryByNameString: ReactTestInstance | null = tree.queryByName('View');
const queryByNameConstructor: ReactTestInstance | null = tree.queryByName(View);
const queryByTextString: ReactTestInstance | null = tree.queryByText(
'<View />'
);
const queryByTextRegExp: ReactTestInstance | null = tree.queryByText(/View/g);
const queryByProps: ReactTestInstance | null = tree.queryByProps({ value: 2 });
const queryByTestId: ReactTestInstance | null = tree.queryByTestId('test-id');
const queryAllByNameString: Array<ReactTestInstance> = tree.getAllByName(
'View'
);
const queryAllByNameConstructor: Array<ReactTestInstance> = tree.getAllByName(
View
);
const queryAllByTextString: Array<ReactTestInstance> = tree.queryAllByText(
'View'
);
const queryAllByTextRegExp: Array<ReactTestInstance> = tree.queryAllByText(
/View/g
);
const queryAllByProps: Array<ReactTestInstance> = tree.getAllByProps({
value: 2,
});
tree.update(<View />);
tree.unmount();
// fireEvent API tests
fireEvent(getByNameString, 'press');
fireEvent(getByNameString, 'press', 'data');
fireEvent.press(getByNameString);
fireEvent.changeText(getByNameString, 'string');
fireEvent.scroll(getByNameString, 'eventData');
// shallow API
const shallowTree: { output: React.ReactElement<any> } = shallow(
<TestComponent />
);
const waitForFlush: Promise<any> = flushMicrotasksQueue();
// debug API
debug(<TestComponent />);
debug(<TestComponent />, 'message');
debug(getByNameString);
debug(getByNameString, 'message');
debug.shallow(<TestComponent />);
debug.shallow(<TestComponent />, 'message');
debug.deep(<TestComponent />);
debug.deep(<TestComponent />, 'message');
const waitBy: Promise<ReactTestInstance> = waitForElement<ReactTestInstance>(
() => tree.getByName('View')
);
const waitByAll: Promise<Array<ReactTestInstance>> = waitForElement<
Array<ReactTestInstance>
>(() => tree.getAllByName('View'), 1000, 50);