skills/callstack__react-native-testing-library
1
0
Fork 0
mirror of https://github.com/callstack/react-native-testing-library.git synced 2026-09-18 23:09:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: reorganize TS test file (#337)

Browse Source
This commit is contained in:
Maciej Jastrzebski
2020-05-20 10:37:18 +02:00
committed by Michał Pierzchała
parent 01bc0ee2b4
commit 40ed26812d
1 changed files with 116 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
typings/__tests__/index.test.tsx
+116 -167
View File
@@ -4,7 +4,6 @@ import { ReactTestInstance } from 'react-test-renderer';
import { import {
render, render,
fireEvent, fireEvent,
shallow,
flushMicrotasksQueue, flushMicrotasksQueue,
waitFor, waitFor,
act, act,
@@ -31,86 +30,89 @@ const TestComponent = () => (
const tree = render(<TestComponent />); const tree = render(<TestComponent />);
// getByAPI tests // getBy API
const getByType: ReactTestInstance = tree.UNSAFE_getByType(View); const getBy: ReactTestInstance[] = [
const getByTypeWithRequiredProps: ReactTestInstance = tree.UNSAFE_getByType( tree.getByText('<View />'),
ElementWithRequiredProps tree.getByText(/View/g),
); tree.getByPlaceholder('my placeholder'),
const getByTextString: ReactTestInstance = tree.getByText('<View />'); tree.getByPlaceholder(/placeholder/g),
const getByTextRegExp: ReactTestInstance = tree.getByText(/View/g); tree.getByDisplayValue('my value'),
const getByPlaceholderString: ReactTestInstance = tree.getByPlaceholder( tree.getByDisplayValue(/value/g),
'my placeholder' tree.getByTestId('test-id'),
); tree.getByA11yLabel('label'),
const getByPlaceholderRegExp: ReactTestInstance = tree.getByPlaceholder( tree.getByA11yHint('label'),
/placeholder/g tree.getByA11yRole('button'),
); tree.getByA11yStates('selected'),
const getByDisplayValueString: ReactTestInstance = tree.getByDisplayValue( tree.getByA11yStates(['selected']),
'my value' tree.getByA11yState({ busy: true }),
); tree.getByA11yValue({ min: 10 }),
const getByDisplayValueRegExp: ReactTestInstance = tree.getByDisplayValue( tree.UNSAFE_getByType(View),
/value/g tree.UNSAFE_getByType(ElementWithRequiredProps),
); tree.UNSAFE_getByProps({ value: 2 }),
const getByProps: ReactTestInstance = tree.UNSAFE_getByProps({ value: 2 }); ];
const getByTestId: ReactTestInstance = tree.getByTestId('test-id');
const getAllByTestId: ReactTestInstance[] = tree.getAllByTestId('test-id');
const getAllByType: Array<ReactTestInstance> = tree.UNSAFE_getAllByType(View);
const getAllByTypeWithRequiredProps: Array<ReactTestInstance> = tree.UNSAFE_getAllByType(
ElementWithRequiredProps
);
const getAllByTextString: Array<ReactTestInstance> = tree.getAllByText(
'<View />'
);
const getAllByTextRegExp: Array<ReactTestInstance> = tree.getAllByText(/Text/g);
const getAllByProps: Array<ReactTestInstance> = tree.UNSAFE_getAllByProps({
value: 2,
});
// queuryByAPI tests const getAllBy: ReactTestInstance[][] = [
const queryByType: ReactTestInstance | null = tree.UNSAFE_queryByType(View); tree.getAllByText('<View />'),
const queryByTypeWithRequiredProps: ReactTestInstance | null = tree.UNSAFE_queryByType( tree.getAllByText(/Text/g),
ElementWithRequiredProps tree.getAllByPlaceholder('my placeholder'),
); tree.getAllByPlaceholder(/placeholder/g),
const queryByTextString: ReactTestInstance | null = tree.queryByText('View'); tree.getAllByDisplayValue('my value'),
const queryByTextRegExp: ReactTestInstance | null = tree.queryByText(/View/g); tree.getAllByDisplayValue(/value/g),
const queryByPlaceholderString: ReactTestInstance | null = tree.queryByPlaceholder( tree.getAllByTestId('test-id'),
'my placeholder' tree.getAllByA11yLabel('label'),
); tree.getAllByA11yHint('label'),
const queryByPlaceholderRegExp: ReactTestInstance | null = tree.queryByPlaceholder( tree.getAllByA11yRole('button'),
/placeholder/g tree.getAllByA11yStates('selected'),
); tree.getAllByA11yStates(['selected']),
const queryByDisplayValueString: ReactTestInstance | null = tree.queryByDisplayValue( tree.getAllByA11yState({ busy: true }),
'my value' tree.getAllByA11yValue({ min: 10 }),
); tree.UNSAFE_getAllByType(View),
const queryByDisplayValueRegExp: ReactTestInstance | null = tree.queryByDisplayValue( tree.UNSAFE_getAllByType(ElementWithRequiredProps),
/value/g tree.UNSAFE_getAllByProps({ value: 2 }),
); ];
const queryByProps: ReactTestInstance | null = tree.UNSAFE_queryByProps({
value: 2,
});
const queryByTestId: ReactTestInstance | null = tree.queryByTestId('test-id');
const queryAllByTestId: ReactTestInstance[] | null = tree.queryAllByTestId(
'test-id'
);
const queryAllByType: Array<ReactTestInstance> = tree.UNSAFE_queryAllByType(
View
);
const queryAllByTypeWithRequiredProps: Array<ReactTestInstance> = tree.UNSAFE_queryAllByType(
ElementWithRequiredProps
);
const queryAllByTextString: Array<ReactTestInstance> = tree.queryAllByText(
'View'
);
const queryAllByTextRegExp: Array<ReactTestInstance> = tree.queryAllByText(
/View/g
);
const queryAllByDisplayValueString: Array<ReactTestInstance> = tree.queryAllByDisplayValue(
'View'
);
const queryAllByDisplayValueRegExp: Array<ReactTestInstance> = tree.queryAllByDisplayValue(
/View/g
);
// findBy API tests // queryBy API
const queryBy: Array<ReactTestInstance | null> = [
tree.queryByText('View'),
tree.queryByText(/View/g),
tree.queryByPlaceholder('my placeholder'),
tree.queryByPlaceholder(/placeholder/g),
tree.queryByDisplayValue('my value'),
tree.queryByDisplayValue(/value/g),
tree.queryByTestId('test-id'),
tree.queryByA11yHint('label'),
tree.queryByA11yLabel('label'),
tree.queryByA11yRole('button'),
tree.queryByA11yStates('selected'),
tree.queryByA11yStates(['selected']),
tree.queryByA11yState({ busy: true }),
tree.queryByA11yValue({ min: 10 }),
tree.UNSAFE_queryByType(View),
tree.UNSAFE_queryByType(ElementWithRequiredProps),
tree.UNSAFE_queryByProps({ value: 2 }),
];
const queryAllBy: ReactTestInstance[][] = [
tree.queryAllByText('View'),
tree.queryAllByText(/View/g),
tree.queryAllByPlaceholder('my placeholder'),
tree.queryAllByPlaceholder(/placeholder/g),
tree.queryAllByDisplayValue('my value'),
tree.queryAllByDisplayValue(/value/g),
tree.queryAllByTestId('test-id'),
tree.queryAllByA11yLabel('label'),
tree.queryAllByA11yHint('label'),
tree.queryAllByA11yRole('button'),
tree.queryAllByA11yStates('selected'),
tree.queryAllByA11yStates(['selected']),
tree.queryAllByA11yState({ busy: true }),
tree.queryAllByA11yValue({ min: 10 }),
tree.UNSAFE_queryAllByType(View),
tree.UNSAFE_queryAllByType(ElementWithRequiredProps),
tree.UNSAFE_queryAllByProps({ value: 2 }),
];
// findBy API
const findBy: Promise<ReactTestInstance>[] = [ const findBy: Promise<ReactTestInstance>[] = [
tree.findByText('View'), tree.findByText('View'),
tree.findByText('View', { timeout: 10, interval: 10 }), tree.findByText('View', { timeout: 10, interval: 10 }),
@@ -153,6 +155,8 @@ const findAllBy: Promise<ReactTestInstance[]>[] = [
tree.findAllByDisplayValue(/View/g, { timeout: 10, interval: 10 }), tree.findAllByDisplayValue(/View/g, { timeout: 10, interval: 10 }),
tree.findAllByTestId('test-id'), tree.findAllByTestId('test-id'),
tree.findAllByTestId('test-id', { timeout: 10, interval: 10 }), tree.findAllByTestId('test-id', { timeout: 10, interval: 10 }),
tree.findAllByA11yLabel('label'),
tree.findAllByA11yLabel('label', { timeout: 10, interval: 10 }),
tree.findAllByA11yHint('label'), tree.findAllByA11yHint('label'),
tree.findAllByA11yHint('label', { timeout: 10, interval: 10 }), tree.findAllByA11yHint('label', { timeout: 10, interval: 10 }),
tree.findAllByA11yState({ busy: true }), tree.findAllByA11yState({ busy: true }),
@@ -161,105 +165,50 @@ const findAllBy: Promise<ReactTestInstance[]>[] = [
tree.findAllByA11yValue({ min: 10 }, { timeout: 10, interval: 10 }), tree.findAllByA11yValue({ min: 10 }, { timeout: 10, interval: 10 }),
]; ];
// Accessibility queries // debug API
const getByA11yLabel: ReactTestInstance = tree.getByA11yLabel('label');
const getAllByA11yLabel: Array<ReactTestInstance> = tree.getAllByA11yLabel(
'label'
);
const queryByA11yLabel: ReactTestInstance = tree.queryByA11yLabel('label');
const queryAllByA11yLabel: Array<ReactTestInstance> = tree.queryAllByA11yLabel(
'label'
);
const getByA11yHint: ReactTestInstance = tree.getByA11yHint('label');
const getAllByA11yHint: Array<ReactTestInstance> = tree.getAllByA11yHint(
'label'
);
const queryByA11yHint: ReactTestInstance = tree.queryByA11yHint('label');
const queryAllByA11yHint: Array<ReactTestInstance> = tree.queryAllByA11yHint(
'label'
);
const getByA11yRole: ReactTestInstance = tree.getByA11yRole('button');
const getAllByA11yRole: Array<ReactTestInstance> = tree.getAllByA11yRole(
'button'
);
const queryByA11yRole: ReactTestInstance = tree.queryByA11yRole('button');
const queryAllByA11yRole: Array<ReactTestInstance> = tree.queryAllByA11yRole(
'button'
);
const getByA11yStates: ReactTestInstance = tree.getByA11yStates('selected');
const getByA11yStatesArray: ReactTestInstance = tree.getByA11yStates([
'selected',
]);
const getAllByA11yStates: Array<ReactTestInstance> = tree.getAllByA11yStates(
'selected'
);
const getAllByA11yStatesArray: Array<ReactTestInstance> = tree.getAllByA11yStates(
['selected']
);
const queryByA11yStates: ReactTestInstance = tree.queryByA11yStates('selected');
const queryByA11yStatesArray: ReactTestInstance = tree.queryByA11yStates([
'selected',
]);
const queryAllByA11yStates: Array<ReactTestInstance> = tree.queryAllByA11yStates(
'selected'
);
const queryAllByA11yStatesArray: Array<ReactTestInstance> = tree.queryAllByA11yStates(
['selected']
);
const getByA11yState: ReactTestInstance = tree.getByA11yState({ busy: true });
const getAllByA11yState: Array<ReactTestInstance> = tree.getAllByA11yState({
busy: true,
});
const queryByA11yState: ReactTestInstance = tree.queryByA11yState({
busy: true,
});
const queryAllByA11yState: Array<ReactTestInstance> = tree.queryAllByA11yState({
busy: true,
});
const getByA11yValue: ReactTestInstance = tree.getByA11yValue({ min: 10 });
const getAllByA11yValue: Array<ReactTestInstance> = tree.getAllByA11yValue({
min: 10,
});
const queryByA11yValue: ReactTestInstance = tree.queryByA11yValue({ min: 10 });
const queryAllByA11yValue: Array<ReactTestInstance> = tree.queryAllByA11yValue({
min: 10,
});
const debugFn = tree.debug(); const debugFn = tree.debug();
const debugFnWithMessage = tree.debug('my message'); const debugFnWithMessage = tree.debug('my message');
// update API
tree.update(<View />); tree.update(<View />);
tree.rerender(<View />); tree.rerender(<View />);
tree.unmount(); tree.unmount();
// fireEvent API tests // fireEvent API
fireEvent(getByA11yLabel, 'press'); const element: ReactTestInstance = tree.getByText('text');
fireEvent(getByA11yLabel, 'press', 'data'); fireEvent(element, 'press');
fireEvent(getByA11yLabel, 'press', 'param1', 'param2'); fireEvent(element, 'press', 'data');
fireEvent.press(getByA11yLabel); fireEvent(element, 'press', 'param1', 'param2');
fireEvent.changeText(getByA11yLabel, 'string'); fireEvent.press(element);
fireEvent.scroll(getByA11yLabel, 'eventData'); fireEvent.changeText(element, 'string');
fireEvent.scroll(element, 'eventData');
// shallow API // waitFor API
const shallowTree: { output: React.ReactElement<any> } = shallow( const waitGetBy: Promise<ReactTestInstance>[] = [
<TestComponent /> waitFor<ReactTestInstance>(() => tree.getByA11yLabel('label')),
); waitFor<ReactTestInstance>(() => tree.getByA11yLabel('label'), {
timeout: 10,
}),
waitFor<ReactTestInstance>(() => tree.getByA11yLabel('label'), {
timeout: 100,
interval: 10,
}),
];
const waitGetAllBy: Promise<ReactTestInstance[]>[] = [
waitFor<ReactTestInstance[]>(() => tree.getAllByA11yLabel('label')),
waitFor<ReactTestInstance[]>(() => tree.getAllByA11yLabel('label'), {
timeout: 10,
}),
waitFor<ReactTestInstance[]>(() => tree.getAllByA11yLabel('label'), {
timeout: 100,
interval: 10,
}),
];
const waitForFlush: Promise<any> = flushMicrotasksQueue(); const waitForFlush: Promise<any> = flushMicrotasksQueue();
const waitBy: Promise<ReactTestInstance> = waitFor<ReactTestInstance>(() => // act API
tree.getByA11yLabel('label')
);
const waitByAll: Promise<ReactTestInstance[]> = waitFor<ReactTestInstance[]>(
() => tree.getAllByA11yLabel('label'),
{ timeout: 1000, interval: 50 }
);
act(() => { act(() => {
render(<TestComponent />); render(<TestComponent />);
}); });