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: tweak docs and examples to match recommended practices 2024 (use screen object for queries) (#1561)

Browse Source 
* chore: tweak docs and examples to match modern usage of lib.

Use screen object for queries (pt.1)

Use screen object for queries (pt.2)

update render docs to modern screen API and fix lint

* refactor: code review tweaks

---------

Co-authored-by: Maciej Jastrzębski <mdjastrzebski@gmail.com>
This commit is contained in:
Steve Galili
2024-03-11 22:46:07 +01:00
committed by GitHub
parent 4c6ec4f1fc
commit 4e148bdb05
36 changed files with 1181 additions and 1158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+18 -10
View File
@@ -88,21 +88,29 @@ flow-typed install react-test-renderer
import { render, screen, fireEvent } from '@testing-library/react-native';
import { QuestionsBoard } from '../QuestionsBoard';
test('form submits two answers', () => {
const allQuestions = ['q1', 'q2'];
const mockFn = jest.fn();
// It is recommended to use userEvent with fake timers
// Some events involve duration so your tests may take a long time to run.
jest.useFakeTimers();
render(<QuestionsBoard questions={allQuestions} onSubmit={mockFn} />);
test('form submits two answers', async () => {
const questions = ['q1', 'q2'];
const onSubmit = jest.fn();
const user = userEvent.setup();
render(<QuestionsBoard questions={questions} onSubmit={onSubmit} />);
const answerInputs = screen.getAllByLabelText('answer input');
fireEvent.changeText(answerInputs[0], 'a1');
fireEvent.changeText(answerInputs[1], 'a2');
fireEvent.press(screen.getByText('Submit'));
// simulates the user focusing on TextInput and typing text one char at a time
await user.type(answerInputs[0], 'a1');
await user.type(answerInputs[1], 'a2');
expect(mockFn).toBeCalledWith({
1: { q: 'q1', a: 'a1' },
2: { q: 'q2', a: 'a2' },
// simulates the user pressing on any pressable element
await user.press(screen.getByRole('button', { name: 'Submit' }));
expect(onSubmit).toHaveBeenCalledWith({
'1': { q: 'q1', a: 'a1' },
'2': { q: 'q2', a: 'a2' },
});
});
```
src/__tests__/__snapshots__/render-debug.test.tsx.snap
+4 -2
View File
@@ -58,6 +58,7 @@ exports[`debug 1`] = `
onResponderTerminate={[Function onResponderTerminate]}
onResponderTerminationRequest={[Function onResponderTerminationRequest]}
onStartShouldSetResponder={[Function onStartShouldSetResponder]}
role="button"
>
<Text>
Change freshness!
@@ -137,6 +138,7 @@ exports[`debug changing component: bananaFresh button message should now be "fre
onResponderTerminate={[Function onResponderTerminate]}
onResponderTerminationRequest={[Function onResponderTerminationRequest]}
onStartShouldSetResponder={[Function onStartShouldSetResponder]}
role="button"
>
<Text>
Change freshness!
@@ -343,6 +345,7 @@ exports[`debug: another custom message 1`] = `
onResponderTerminate={[Function onResponderTerminate]}
onResponderTerminationRequest={[Function onResponderTerminationRequest]}
onStartShouldSetResponder={[Function onStartShouldSetResponder]}
role="button"
>
<Text>
Change freshness!
@@ -394,7 +397,6 @@ exports[`debug: shallow 1`] = `
/>
<MyButton
onPress={[Function changeFresh]}
type="primary"
>
Change freshness!
</MyButton>
@@ -446,7 +448,6 @@ exports[`debug: shallow with message 1`] = `
/>
<MyButton
onPress={[Function changeFresh]}
type="primary"
>
Change freshness!
</MyButton>
@@ -526,6 +527,7 @@ exports[`debug: with message 1`] = `
onResponderTerminate={[Function onResponderTerminate]}
onResponderTerminationRequest={[Function onResponderTerminationRequest]}
onStartShouldSetResponder={[Function onStartShouldSetResponder]}
role="button"
>
<Text>
Change freshness!
src/__tests__/act.test.tsx
+5 -7
View File
@@ -1,8 +1,6 @@
import * as React from 'react';
import { Text } from 'react-native';
import act from '../act';
import render from '../render';
import fireEvent from '../fire-event';
import { act, fireEvent, render, screen } from '../';
type UseEffectProps = { callback(): void };
const UseEffect = ({ callback }: UseEffectProps) => {
@@ -26,15 +24,15 @@ test('render should trigger useEffect', () => {
test('update should trigger useEffect', () => {
const effectCallback = jest.fn();
const { update } = render(<UseEffect callback={effectCallback} />);
update(<UseEffect callback={effectCallback} />);
render(<UseEffect callback={effectCallback} />);
screen.update(<UseEffect callback={effectCallback} />);
expect(effectCallback).toHaveBeenCalledTimes(2);
});
test('fireEvent should trigger useState', () => {
const { getByText } = render(<Counter />);
const counter = getByText(/Total count/i);
render(<Counter />);
const counter = screen.getByText(/Total count/i);
expect(counter.props.children).toEqual('Total count: 0');
fireEvent.press(counter);
src/__tests__/fire-event-textInput.test.tsx
+9 -9
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { Text, TextInput, TextInputProps } from 'react-native';
import { render, fireEvent } from '..';
import { render, fireEvent, screen } from '..';
function WrappedTextInput(props: TextInputProps) {
return <TextInput {...props} />;
@@ -18,7 +18,7 @@ test('should fire only non-touch-related events on non-editable TextInput', () =
const onSubmitEditing = jest.fn();
const onLayout = jest.fn();
const view = render(
render(
<TextInput
editable={false}
testID="subject"
@@ -29,7 +29,7 @@ test('should fire only non-touch-related events on non-editable TextInput', () =
/>
);
const subject = view.getByTestId('subject');
const subject = screen.getByTestId('subject');
fireEvent(subject, 'focus');
fireEvent.changeText(subject, 'Text');
fireEvent(subject, 'submitEditing', { nativeEvent: { text: 'Text' } });
@@ -47,7 +47,7 @@ test('should fire only non-touch-related events on non-editable TextInput with n
const onSubmitEditing = jest.fn();
const onLayout = jest.fn();
const view = render(
render(
<TextInput
editable={false}
testID="subject"
@@ -60,7 +60,7 @@ test('should fire only non-touch-related events on non-editable TextInput with n
</TextInput>
);
const subject = view.getByText('Nested Text');
const subject = screen.getByText('Nested Text');
fireEvent(subject, 'focus');
fireEvent(subject, 'onFocus');
fireEvent.changeText(subject, 'Text');
@@ -98,7 +98,7 @@ test('should fire only non-touch-related events on non-editable wrapped TextInpu
const onSubmitEditing = jest.fn();
const onLayout = jest.fn();
const view = render(
render(
<WrappedTextInput
editable={false}
testID="subject"
@@ -109,7 +109,7 @@ test('should fire only non-touch-related events on non-editable wrapped TextInpu
/>
);
const subject = view.getByTestId('subject');
const subject = screen.getByTestId('subject');
fireEvent(subject, 'focus');
fireEvent.changeText(subject, 'Text');
fireEvent(subject, 'submitEditing', { nativeEvent: { text: 'Text' } });
@@ -130,7 +130,7 @@ test('should fire only non-touch-related events on non-editable double wrapped T
const onSubmitEditing = jest.fn();
const onLayout = jest.fn();
const view = render(
render(
<DoubleWrappedTextInput
editable={false}
testID="subject"
@@ -141,7 +141,7 @@ test('should fire only non-touch-related events on non-editable double wrapped T
/>
);
const subject = view.getByTestId('subject');
const subject = screen.getByTestId('subject');
fireEvent(subject, 'focus');
fireEvent.changeText(subject, 'Text');
fireEvent(subject, 'submitEditing', { nativeEvent: { text: 'Text' } });
src/__tests__/fire-event.test.tsx
+47 -57
View File
@@ -1,14 +1,14 @@
import * as React from 'react';
import {
View,
TouchableOpacity,
PanResponder,
Pressable,
Text,
ScrollView,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import { render, fireEvent } from '..';
import { fireEvent, render, screen } from '..';
type OnPressComponentProps = {
onPress: () => void;
@@ -58,9 +58,9 @@ const CustomEventComponentWithCustomName = ({
describe('fireEvent', () => {
test('should invoke specified event', () => {
const onPressMock = jest.fn();
const { getByText } = render(<OnPressComponent onPress={onPressMock} text="Press me" />);
render(<OnPressComponent onPress={onPressMock} text="Press me" />);
fireEvent(getByText('Press me'), 'press');
fireEvent(screen.getByText('Press me'), 'press');
expect(onPressMock).toHaveBeenCalled();
});
@@ -68,19 +68,19 @@ describe('fireEvent', () => {
test('should invoke specified event on parent element', () => {
const onPressMock = jest.fn();
const text = 'New press text';
const { getByText } = render(<OnPressComponent onPress={onPressMock} text={text} />);
render(<OnPressComponent onPress={onPressMock} text={text} />);
fireEvent(getByText(text), 'press');
fireEvent(screen.getByText(text), 'press');
expect(onPressMock).toHaveBeenCalled();
});
test('should not fire if the press handler is not passed to children', () => {
const onPressMock = jest.fn();
const { getByText } = render(
render(
// TODO: this functionality is buggy, i.e. it will fail if we wrap this component with a View.
<WithoutEventComponent onPress={onPressMock} />
);
fireEvent(getByText('Without event'), 'press');
fireEvent(screen.getByText('Without event'), 'press');
expect(onPressMock).not.toHaveBeenCalled();
});
@@ -88,13 +88,13 @@ describe('fireEvent', () => {
const handlerMock = jest.fn();
const EVENT_DATA = 'event data';
const { getByText } = render(
render(
<View>
<CustomEventComponent onCustomEvent={handlerMock} />
</View>
);
fireEvent(getByText('Custom event component'), 'customEvent', EVENT_DATA);
fireEvent(screen.getByText('Custom event component'), 'customEvent', EVENT_DATA);
expect(handlerMock).toHaveBeenCalledWith(EVENT_DATA);
});
@@ -109,9 +109,9 @@ test('fireEvent.press', () => {
pageY: 30,
},
};
const { getByText } = render(<OnPressComponent onPress={onPressMock} text={text} />);
render(<OnPressComponent onPress={onPressMock} text={text} />);
fireEvent.press(getByText(text), eventData);
fireEvent.press(screen.getByText(text), eventData);
expect(onPressMock).toHaveBeenCalledWith(eventData);
});
@@ -126,13 +126,13 @@ test('fireEvent.scroll', () => {
},
};
const { getByText } = render(
render(
<ScrollView onScroll={onScrollMock}>
<Text>XD</Text>
</ScrollView>
);
fireEvent.scroll(getByText('XD'), eventData);
fireEvent.scroll(screen.getByText('XD'), eventData);
expect(onScrollMock).toHaveBeenCalledWith(eventData);
});
@@ -141,13 +141,13 @@ test('fireEvent.changeText', () => {
const onChangeTextMock = jest.fn();
const CHANGE_TEXT = 'content';
const { getByPlaceholderText } = render(
render(
<View>
<TextInput placeholder="Customer placeholder" onChangeText={onChangeTextMock} />
</View>
);
fireEvent.changeText(getByPlaceholderText('Customer placeholder'), CHANGE_TEXT);
fireEvent.changeText(screen.getByPlaceholderText('Customer placeholder'), CHANGE_TEXT);
expect(onChangeTextMock).toHaveBeenCalledWith(CHANGE_TEXT);
});
@@ -155,9 +155,9 @@ test('fireEvent.changeText', () => {
test('custom component with custom event name', () => {
const handlePress = jest.fn();
const { getByText } = render(<CustomEventComponentWithCustomName handlePress={handlePress} />);
render(<CustomEventComponentWithCustomName handlePress={handlePress} />);
fireEvent(getByText('Custom component'), 'handlePress');
fireEvent(screen.getByText('Custom component'), 'handlePress');
expect(handlePress).toHaveBeenCalled();
});
@@ -165,16 +165,16 @@ test('custom component with custom event name', () => {
test('event with multiple handler parameters', () => {
const handlePress = jest.fn();
const { getByText } = render(<CustomEventComponentWithCustomName handlePress={handlePress} />);
render(<CustomEventComponentWithCustomName handlePress={handlePress} />);
fireEvent(getByText('Custom component'), 'handlePress', 'param1', 'param2');
fireEvent(screen.getByText('Custom component'), 'handlePress', 'param1', 'param2');
expect(handlePress).toHaveBeenCalledWith('param1', 'param2');
});
test('should not fire on disabled TouchableOpacity', () => {
const handlePress = jest.fn();
const screen = render(
render(
<View>
<TouchableOpacity onPress={handlePress} disabled={true}>
<Text>Trigger</Text>
@@ -188,7 +188,7 @@ test('should not fire on disabled TouchableOpacity', () => {
test('should not fire on disabled Pressable', () => {
const handlePress = jest.fn();
const screen = render(
render(
<View>
<Pressable onPress={handlePress} disabled={true}>
<Text>Trigger</Text>
@@ -202,7 +202,7 @@ test('should not fire on disabled Pressable', () => {
test('should not fire inside View with pointerEvents="none"', () => {
const onPress = jest.fn();
const screen = render(
render(
<View pointerEvents="none">
<Pressable onPress={onPress}>
<Text>Trigger</Text>
@@ -217,7 +217,7 @@ test('should not fire inside View with pointerEvents="none"', () => {
test('should not fire inside View with pointerEvents="box-only"', () => {
const onPress = jest.fn();
const screen = render(
render(
<View pointerEvents="box-only">
<Pressable onPress={onPress}>
<Text>Trigger</Text>
@@ -232,7 +232,7 @@ test('should not fire inside View with pointerEvents="box-only"', () => {
test('should fire inside View with pointerEvents="box-none"', () => {
const onPress = jest.fn();
const screen = render(
render(
<View pointerEvents="box-none">
<Pressable onPress={onPress}>
<Text>Trigger</Text>
@@ -247,7 +247,7 @@ test('should fire inside View with pointerEvents="box-none"', () => {
test('should fire inside View with pointerEvents="auto"', () => {
const onPress = jest.fn();
const screen = render(
render(
<View pointerEvents="auto">
<Pressable onPress={onPress}>
<Text>Trigger</Text>
@@ -262,7 +262,7 @@ test('should fire inside View with pointerEvents="auto"', () => {
test('should not fire deeply inside View with pointerEvents="box-only"', () => {
const onPress = jest.fn();
const screen = render(
render(
<View pointerEvents="box-only">
<View>
<Pressable onPress={onPress}>
@@ -279,9 +279,7 @@ test('should not fire deeply inside View with pointerEvents="box-only"', () => {
test('should fire non-pointer events inside View with pointerEvents="box-none"', () => {
const onTouchStart = jest.fn();
const screen = render(
<View testID="view" pointerEvents="box-none" onTouchStart={onTouchStart} />
);
render(<View testID="view" pointerEvents="box-none" onTouchStart={onTouchStart} />);
fireEvent(screen.getByTestId('view'), 'touchStart');
expect(onTouchStart).toHaveBeenCalled();
@@ -289,7 +287,7 @@ test('should fire non-pointer events inside View with pointerEvents="box-none"',
test('should fire non-touch events inside View with pointerEvents="box-none"', () => {
const onLayout = jest.fn();
const screen = render(<View testID="view" pointerEvents="box-none" onLayout={onLayout} />);
render(<View testID="view" pointerEvents="box-none" onLayout={onLayout} />);
fireEvent(screen.getByTestId('view'), 'layout');
expect(onLayout).toHaveBeenCalled();
@@ -299,9 +297,7 @@ test('should fire non-touch events inside View with pointerEvents="box-none"', (
// the 'press' event on host View rendered by pressable.
test('should fire on Pressable with pointerEvents="box-only', () => {
const onPress = jest.fn();
const screen = render(
<Pressable testID="pressable" pointerEvents="box-only" onPress={onPress} />
);
render(<Pressable testID="pressable" pointerEvents="box-only" onPress={onPress} />);
fireEvent.press(screen.getByTestId('pressable'));
expect(onPress).toHaveBeenCalled();
@@ -310,7 +306,7 @@ test('should fire on Pressable with pointerEvents="box-only', () => {
test('should pass event up on disabled TouchableOpacity', () => {
const handleInnerPress = jest.fn();
const handleOuterPress = jest.fn();
const screen = render(
render(
<TouchableOpacity onPress={handleOuterPress}>
<TouchableOpacity onPress={handleInnerPress} disabled={true}>
<Text>Inner Trigger</Text>
@@ -326,7 +322,7 @@ test('should pass event up on disabled TouchableOpacity', () => {
test('should pass event up on disabled Pressable', () => {
const handleInnerPress = jest.fn();
const handleOuterPress = jest.fn();
const screen = render(
render(
<Pressable onPress={handleOuterPress}>
<Pressable onPress={handleInnerPress} disabled={true}>
<Text>Inner Trigger</Text>
@@ -353,7 +349,7 @@ const TestComponent = ({ onPress }: TestComponentProps) => {
test('is not fooled by non-native disabled prop', () => {
const handlePress = jest.fn();
const screen = render(<TestComponent onPress={handlePress} disabled={true} />);
render(<TestComponent onPress={handlePress} disabled={true} />);
fireEvent.press(screen.getByText('Trigger Test'));
expect(handlePress).toHaveBeenCalledTimes(1);
@@ -363,6 +359,7 @@ type TestChildTouchableComponentProps = {
onPress: () => void;
someProp: boolean;
};
function TestChildTouchableComponent({ onPress, someProp }: TestChildTouchableComponentProps) {
return (
<View>
@@ -376,7 +373,7 @@ function TestChildTouchableComponent({ onPress, someProp }: TestChildTouchableCo
test('is not fooled by non-responder wrapping host elements', () => {
const handlePress = jest.fn();
const screen = render(
render(
<View>
<TestChildTouchableComponent onPress={handlePress} someProp={true} />
</View>
@@ -387,6 +384,7 @@ test('is not fooled by non-responder wrapping host elements', () => {
});
type TestDraggableComponentProps = { onDrag: () => void };
function TestDraggableComponent({ onDrag }: TestDraggableComponentProps) {
const responderHandlers = PanResponder.create({
onMoveShouldSetPanResponder: (_evt, _gestureState) => true,
@@ -403,7 +401,7 @@ function TestDraggableComponent({ onDrag }: TestDraggableComponentProps) {
test('has only onMove', () => {
const handleDrag = jest.fn();
const screen = render(<TestDraggableComponent onDrag={handleDrag} />);
render(<TestDraggableComponent onDrag={handleDrag} />);
fireEvent(screen.getByText('Trigger'), 'responderMove', {
touchHistory: { mostRecentTimeStamp: '2', touchBank: [] },
@@ -416,41 +414,33 @@ test('has only onMove', () => {
describe('native events', () => {
test('triggers onScrollBeginDrag', () => {
const onScrollBeginDragSpy = jest.fn();
const { getByTestId } = render(
<ScrollView testID="test-id" onScrollBeginDrag={onScrollBeginDragSpy} />
);
render(<ScrollView testID="test-id" onScrollBeginDrag={onScrollBeginDragSpy} />);
fireEvent(getByTestId('test-id'), 'onScrollBeginDrag');
fireEvent(screen.getByTestId('test-id'), 'onScrollBeginDrag');
expect(onScrollBeginDragSpy).toHaveBeenCalled();
});
test('triggers onScrollEndDrag', () => {
const onScrollEndDragSpy = jest.fn();
const { getByTestId } = render(
<ScrollView testID="test-id" onScrollEndDrag={onScrollEndDragSpy} />
);
render(<ScrollView testID="test-id" onScrollEndDrag={onScrollEndDragSpy} />);
fireEvent(getByTestId('test-id'), 'onScrollEndDrag');
fireEvent(screen.getByTestId('test-id'), 'onScrollEndDrag');
expect(onScrollEndDragSpy).toHaveBeenCalled();
});
test('triggers onMomentumScrollBegin', () => {
const onMomentumScrollBeginSpy = jest.fn();
const { getByTestId } = render(
<ScrollView testID="test-id" onMomentumScrollBegin={onMomentumScrollBeginSpy} />
);
render(<ScrollView testID="test-id" onMomentumScrollBegin={onMomentumScrollBeginSpy} />);
fireEvent(getByTestId('test-id'), 'onMomentumScrollBegin');
fireEvent(screen.getByTestId('test-id'), 'onMomentumScrollBegin');
expect(onMomentumScrollBeginSpy).toHaveBeenCalled();
});
test('triggers onMomentumScrollEnd', () => {
const onMomentumScrollEndSpy = jest.fn();
const { getByTestId } = render(
<ScrollView testID="test-id" onMomentumScrollEnd={onMomentumScrollEndSpy} />
);
render(<ScrollView testID="test-id" onMomentumScrollEnd={onMomentumScrollEndSpy} />);
fireEvent(getByTestId('test-id'), 'onMomentumScrollEnd');
fireEvent(screen.getByTestId('test-id'), 'onMomentumScrollEnd');
expect(onMomentumScrollEndSpy).toHaveBeenCalled();
});
});
src/__tests__/host-text-nesting.test.tsx
+15 -15
View File
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Text, Pressable, View } from 'react-native';
import { render, within } from '../pure';
import { render, within, screen } from '../pure';
/**
* Our queries interact differently with composite and host elements, and some specific cases require us
@@ -12,18 +12,18 @@ import { render, within } from '../pure';
*/
describe('nested text handling', () => {
test('within same node', () => {
const view = render(<Text testID="subject">Hello</Text>);
expect(within(view.getByTestId('subject')).getByText('Hello')).toBeTruthy();
render(<Text testID="subject">Hello</Text>);
expect(within(screen.getByTestId('subject')).getByText('Hello')).toBeTruthy();
});
test('role with direct text children', () => {
const view = render(<Text accessibilityRole="header">About</Text>);
render(<Text accessibilityRole="header">About</Text>);
expect(view.getByRole('header', { name: 'About' })).toBeTruthy();
expect(screen.getByRole('header', { name: 'About' })).toBeTruthy();
});
test('nested text with child with role', () => {
const view = render(
render(
<Text>
<Text testID="child" accessibilityRole="header">
About
@@ -31,11 +31,11 @@ describe('nested text handling', () => {
</Text>
);
expect(view.getByRole('header', { name: 'About' }).props.testID).toBe('child');
expect(screen.getByRole('header', { name: 'About' }).props.testID).toBe('child');
});
test('pressable within View, with text child', () => {
const view = render(
render(
<View>
<Pressable testID="pressable" accessibilityRole="button">
<Text>Save</Text>
@@ -43,11 +43,11 @@ describe('nested text handling', () => {
</View>
);
expect(view.getByRole('button', { name: 'Save' }).props.testID).toBe('pressable');
expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('pressable');
});
test('pressable within View, with text child within view', () => {
const view = render(
render(
<View>
<Pressable testID="pressable" accessibilityRole="button">
<View>
@@ -57,21 +57,21 @@ describe('nested text handling', () => {
</View>
);
expect(view.getByRole('button', { name: 'Save' }).props.testID).toBe('pressable');
expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('pressable');
});
test('Text within pressable', () => {
const view = render(
render(
<Pressable testID="pressable" accessibilityRole="button">
<Text testID="text">Save</Text>
</Pressable>
);
expect(view.getByText('Save').props.testID).toBe('text');
expect(screen.getByText('Save').props.testID).toBe('text');
});
test('Text within view within pressable', () => {
const view = render(
render(
<Pressable testID="pressable" accessibilityRole="button">
<View>
<Text testID="text">Save</Text>
@@ -79,6 +79,6 @@ describe('nested text handling', () => {
</Pressable>
);
expect(view.getByText('Save').props.testID).toBe('text');
expect(screen.getByText('Save').props.testID).toBe('text');
});
});
src/__tests__/questionsBoard.test.tsx
+20 -15
View File
@@ -1,11 +1,14 @@
import * as React from 'react';
import { View, TouchableOpacity, Text, ScrollView, TextInput } from 'react-native';
import { render, fireEvent } from '..';
import { Pressable, ScrollView, Text, TextInput, View } from 'react-native';
import { render, screen, userEvent } from '..';
type QuestionsBoardProps = {
questions: string[];
onSubmit: (obj: {}) => void;
};
jest.useFakeTimers();
function QuestionsBoard({ questions, onSubmit }: QuestionsBoardProps) {
const [data, setData] = React.useState({});
@@ -28,28 +31,30 @@ function QuestionsBoard({ questions, onSubmit }: QuestionsBoardProps) {
</View>
);
})}
<TouchableOpacity onPress={() => onSubmit(data)}>
<Pressable accessibilityRole={'button'} onPress={() => onSubmit(data)}>
<Text>Submit</Text>
</TouchableOpacity>
</Pressable>
</ScrollView>
);
}
test('form submits two answers', () => {
const allQuestions = ['q1', 'q2'];
const mockFn = jest.fn();
test('form submits two answers', async () => {
const questions = ['q1', 'q2'];
const onSubmit = jest.fn();
const { getAllByLabelText, getByText } = render(
<QuestionsBoard questions={allQuestions} onSubmit={mockFn} />
);
const user = userEvent.setup();
render(<QuestionsBoard questions={questions} onSubmit={onSubmit} />);
const answerInputs = getAllByLabelText('answer input');
const answerInputs = screen.getAllByLabelText('answer input');
fireEvent.changeText(answerInputs[0], 'a1');
fireEvent.changeText(answerInputs[1], 'a2');
fireEvent.press(getByText('Submit'));
// simulates the user focusing on TextInput and typing text one char at a time
await user.type(answerInputs[0], 'a1');
await user.type(answerInputs[1], 'a2');
expect(mockFn).toHaveBeenCalledWith({
// simulates the user pressing on any pressable element
await user.press(screen.getByRole('button', { name: 'Submit' }));
expect(onSubmit).toHaveBeenCalledWith({
'1': { q: 'q1', a: 'a1' },
'2': { q: 'q2', a: 'a2' },
});
src/__tests__/react-native-api.test.tsx
+22 -22
View File
@@ -1,6 +1,6 @@
import * as React from 'react';
import { View, Text, TextInput, Switch, ScrollView, FlatList } from 'react-native';
import { render } from '..';
import { FlatList, ScrollView, Switch, Text, TextInput, View } from 'react-native';
import { render, screen } from '..';
/**
* Tests in this file are intended to give us an proactive warning that React Native behavior has
@@ -8,9 +8,9 @@ import { render } from '..';
*/
test('React Native API assumption: <View> renders single host element', () => {
const view = render(<View testID="test" />);
render(<View testID="test" />);
expect(view.toJSON()).toMatchInlineSnapshot(`
expect(screen.toJSON()).toMatchInlineSnapshot(`
<View
testID="test"
/>
@@ -18,9 +18,9 @@ test('React Native API assumption: <View> renders single host element', () => {
});
test('React Native API assumption: <Text> renders single host element', () => {
const view = render(<Text testID="test">Hello</Text>);
render(<Text testID="test">Hello</Text>);
expect(view.toJSON()).toMatchInlineSnapshot(`
expect(screen.toJSON()).toMatchInlineSnapshot(`
<Text
testID="test"
>
@@ -30,7 +30,7 @@ test('React Native API assumption: <Text> renders single host element', () => {
});
test('React Native API assumption: nested <Text> renders single host element', () => {
const view = render(
render(
<Text testID="test">
<Text testID="before">Before</Text>
Hello
@@ -40,7 +40,7 @@ test('React Native API assumption: nested <Text> renders single host element', (
</Text>
);
expect(view.toJSON()).toMatchInlineSnapshot(`
expect(screen.toJSON()).toMatchInlineSnapshot(`
<Text
testID="test"
>
@@ -64,7 +64,7 @@ test('React Native API assumption: nested <Text> renders single host element', (
});
test('React Native API assumption: <TextInput> renders single host element', () => {
const view = render(
render(
<TextInput
testID="test"
defaultValue="default"
@@ -73,7 +73,7 @@ test('React Native API assumption: <TextInput> renders single host element', ()
/>
);
expect(view.toJSON()).toMatchInlineSnapshot(`
expect(screen.toJSON()).toMatchInlineSnapshot(`
<TextInput
defaultValue="default"
placeholder="Placeholder"
@@ -84,13 +84,13 @@ test('React Native API assumption: <TextInput> renders single host element', ()
});
test('React Native API assumption: <TextInput> with nested Text renders single host element', () => {
const view = render(
render(
<TextInput testID="test" placeholder="Placeholder">
<Text>Hello</Text>
</TextInput>
);
expect(view.toJSON()).toMatchInlineSnapshot(`
expect(screen.toJSON()).toMatchInlineSnapshot(`
<TextInput
placeholder="Placeholder"
testID="test"
@@ -103,9 +103,9 @@ test('React Native API assumption: <TextInput> with nested Text renders single h
});
test('React Native API assumption: <Switch> renders single host element', () => {
const view = render(<Switch testID="test" value={true} onChange={jest.fn()} />);
render(<Switch testID="test" value={true} onChange={jest.fn()} />);
expect(view.toJSON()).toMatchInlineSnapshot(`
expect(screen.toJSON()).toMatchInlineSnapshot(`
<RCTSwitch
accessibilityRole="switch"
onChange={[Function]}
@@ -124,7 +124,7 @@ test('React Native API assumption: <Switch> renders single host element', () =>
});
test('React Native API assumption: aria-* props render on host View', () => {
const view = render(
render(
<View
testID="test"
aria-busy
@@ -147,7 +147,7 @@ test('React Native API assumption: aria-* props render on host View', () => {
/>
);
expect(view.toJSON()).toMatchInlineSnapshot(`
expect(screen.toJSON()).toMatchInlineSnapshot(`
<View
aria-busy={true}
aria-checked={true}
@@ -172,7 +172,7 @@ test('React Native API assumption: aria-* props render on host View', () => {
});
test('React Native API assumption: aria-* props render on host Text', () => {
const view = render(
render(
<Text
testID="test"
aria-busy
@@ -195,7 +195,7 @@ test('React Native API assumption: aria-* props render on host Text', () => {
/>
);
expect(view.toJSON()).toMatchInlineSnapshot(`
expect(screen.toJSON()).toMatchInlineSnapshot(`
<Text
aria-busy={true}
aria-checked={true}
@@ -220,7 +220,7 @@ test('React Native API assumption: aria-* props render on host Text', () => {
});
test('React Native API assumption: aria-* props render on host TextInput', () => {
const view = render(
render(
<TextInput
testID="test"
aria-busy
@@ -243,7 +243,7 @@ test('React Native API assumption: aria-* props render on host TextInput', () =>
/>
);
expect(view.toJSON()).toMatchInlineSnapshot(`
expect(screen.toJSON()).toMatchInlineSnapshot(`
<TextInput
aria-busy={true}
aria-checked={true}
@@ -268,7 +268,7 @@ test('React Native API assumption: aria-* props render on host TextInput', () =>
});
test('ScrollView renders correctly', () => {
const screen = render(
render(
<ScrollView testID="scrollView">
<View testID="view" />
</ScrollView>
@@ -288,7 +288,7 @@ test('ScrollView renders correctly', () => {
});
test('FlatList renders correctly', () => {
const screen = render(
render(
<FlatList testID="flatList" data={[1, 2]} renderItem={({ item }) => <Text>{item}</Text>} />
);
src/__tests__/render-debug.test.tsx
+44 -45
View File
@@ -1,10 +1,8 @@
/* eslint-disable no-console */
import * as React from 'react';
import { View, Text, TextInput, Pressable } from 'react-native';
import { Pressable, Text, TextInput, View } from 'react-native';
import stripAnsi from 'strip-ansi';
import { render, fireEvent, configure } from '..';
type ConsoleLogMock = jest.Mock<Array<string>>;
import { configure, fireEvent, render, screen } from '..';
const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -30,14 +28,17 @@ afterEach(() => {
jest.restoreAllMocks();
});
class MyButton extends React.Component<any> {
render() {
return (
<Pressable onPress={this.props.onPress}>
<Text>{this.props.children}</Text>
</Pressable>
);
}
interface MyButtonProps {
onPress: () => void;
children: string;
}
function MyButton(props: MyButtonProps) {
return (
<Pressable role="button" onPress={props.onPress}>
<Text>{props.children}</Text>
</Pressable>
);
}
class Banana extends React.Component<any, { fresh: boolean }> {
@@ -82,9 +83,7 @@ class Banana extends React.Component<any, { fresh: boolean }> {
/>
<TextInput defaultValue={DEFAULT_INPUT_CUSTOMER} />
<TextInput defaultValue={'hello'} value="" />
<MyButton onPress={this.changeFresh} type="primary">
Change freshness!
</MyButton>
<MyButton onPress={this.changeFresh}>Change freshness!</MyButton>
<Text testID="duplicateText">First Text</Text>
<Text testID="duplicateText">Second Text</Text>
<Text>{test}</Text>
@@ -94,50 +93,50 @@ class Banana extends React.Component<any, { fresh: boolean }> {
}
test('debug', () => {
const { debug } = render(<Banana />);
render(<Banana />);
debug();
debug('my custom message');
debug.shallow();
debug.shallow('my other custom message');
debug({ message: 'another custom message' });
screen.debug();
screen.debug('my custom message');
screen.debug.shallow();
screen.debug.shallow('my other custom message');
screen.debug({ message: 'another custom message' });
const mockCalls = (console.log as any as ConsoleLogMock).mock.calls;
const mockCalls = jest.mocked(console.log).mock.calls;
expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot();
expect(stripAnsi(mockCalls[1][0] + mockCalls[1][1])).toMatchSnapshot('with message');
expect(stripAnsi(mockCalls[2][0])).toMatchSnapshot('shallow');
expect(stripAnsi(mockCalls[3][0] + mockCalls[3][1])).toMatchSnapshot('shallow with message');
expect(stripAnsi(mockCalls[4][0] + mockCalls[4][1])).toMatchSnapshot('another custom message');
const mockWarnCalls = (console.warn as any as ConsoleLogMock).mock.calls;
const mockWarnCalls = jest.mocked(console.warn).mock.calls;
expect(mockWarnCalls[0]).toEqual([
'Using debug("message") is deprecated and will be removed in future release, please use debug({ message; "message" }) instead.',
]);
});
test('debug changing component', () => {
const { UNSAFE_getByProps, debug } = render(<Banana />);
fireEvent.press(UNSAFE_getByProps({ type: 'primary' }));
render(<Banana />);
fireEvent.press(screen.getByRole('button', { name: 'Change freshness!' }));
debug();
screen.debug();
const mockCalls = (console.log as any as ConsoleLogMock).mock.calls;
const mockCalls = jest.mocked(console.log).mock.calls;
expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot(
'bananaFresh button message should now be "fresh"'
);
});
test('debug with only children prop', () => {
const { debug } = render(<Banana />);
debug({ mapProps: () => ({}) });
render(<Banana />);
screen.debug({ mapProps: () => ({}) });
const mockCalls = (console.log as any as ConsoleLogMock).mock.calls;
const mockCalls = jest.mocked(console.log).mock.calls;
expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot();
});
test('debug with only prop whose value is bananaChef', () => {
const { debug } = render(<Banana />);
debug({
render(<Banana />);
screen.debug({
mapProps: (props) => {
const filterProps: Record<string, unknown> = {};
Object.keys(props).forEach((key) => {
@@ -149,51 +148,51 @@ test('debug with only prop whose value is bananaChef', () => {
},
});
const mockCalls = (console.log as any as ConsoleLogMock).mock.calls;
const mockCalls = jest.mocked(console.log).mock.calls;
expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot();
});
test('debug with only props from TextInput components', () => {
const { debug } = render(<Banana />);
debug({
render(<Banana />);
screen.debug({
mapProps: (props, node) => (node.type === 'TextInput' ? props : {}),
});
const mockCalls = (console.log as any as ConsoleLogMock).mock.calls;
const mockCalls = jest.mocked(console.log).mock.calls;
expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot();
});
test('debug should use debugOptions from config when no option is specified', () => {
configure({ defaultDebugOptions: { mapProps: () => ({}) } });
const { debug } = render(
render(
<View style={{ backgroundColor: 'red' }}>
<Text>hello</Text>
</View>
);
debug();
screen.debug();
const mockCalls = (console.log as any as ConsoleLogMock).mock.calls;
const mockCalls = jest.mocked(console.log).mock.calls;
expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot();
});
test('filtering out props through mapProps option should not modify component', () => {
const { debug, getByTestId } = render(<View testID="viewTestID" />);
debug({ mapProps: () => ({}) });
render(<View testID="viewTestID" />);
screen.debug({ mapProps: () => ({}) });
expect(getByTestId('viewTestID')).toBeTruthy();
expect(screen.getByTestId('viewTestID')).toBeTruthy();
});
test('debug should use given options over config debugOptions', () => {
configure({ defaultDebugOptions: { mapProps: () => ({}) } });
const { debug } = render(
render(
<View style={{ backgroundColor: 'red' }}>
<Text>hello</Text>
</View>
);
debug({ mapProps: (props) => props });
screen.debug({ mapProps: (props) => props });
const mockCalls = (console.log as any as ConsoleLogMock).mock.calls;
const mockCalls = jest.mocked(console.log).mock.calls;
expect(stripAnsi(mockCalls[0][0])).toMatchSnapshot();
});
src/__tests__/render-string-validation.test.tsx
+5 -5
View File
@@ -1,6 +1,6 @@
import * as React from 'react';
import { View, Text, Pressable } from 'react-native';
import { render, fireEvent } from '..';
import { render, fireEvent, screen } from '..';
// eslint-disable-next-line no-console
const originalConsoleError = console.error;
@@ -34,11 +34,11 @@ test('should throw when rendering a string outside a text component', () => {
});
test('should throw an error when rerendering with text outside of Text component', () => {
const { rerender } = render(<View />, {
render(<View />, {
unstable_validateStringsRenderedWithinText: true,
});
expect(() => rerender(<View>hello</View>)).toThrow(
expect(() => screen.rerender(<View>hello</View>)).toThrow(
`${VALIDATION_ERROR}. Detected attempt to render "hello" string within a <View> component.`
);
});
@@ -58,11 +58,11 @@ const InvalidTextAfterPress = () => {
};
test('should throw an error when strings are rendered outside Text', () => {
const { getByText } = render(<InvalidTextAfterPress />, {
render(<InvalidTextAfterPress />, {
unstable_validateStringsRenderedWithinText: true,
});
expect(() => fireEvent.press(getByText('Show text'))).toThrow(
expect(() => fireEvent.press(screen.getByText('Show text'))).toThrow(
`${VALIDATION_ERROR}. Detected attempt to render "text rendered outside text component" string within a <View> component.`
);
});
src/__tests__/render.test.tsx
+43 -48
View File
@@ -1,8 +1,8 @@
/* eslint-disable no-console */
import * as React from 'react';
import { View, Text, TextInput, Pressable } from 'react-native';
import { Pressable, Text, TextInput, View } from 'react-native';
import { getConfig, resetToDefaults } from '../config';
import { render, screen, fireEvent, RenderAPI } from '..';
import { fireEvent, render, RenderAPI, screen } from '..';
const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -75,57 +75,57 @@ class Banana extends React.Component<any, { fresh: boolean }> {
}
test('UNSAFE_getAllByType, UNSAFE_queryAllByType', () => {
const { UNSAFE_getAllByType, UNSAFE_queryAllByType } = render(<Banana />);
const [text, status, button] = UNSAFE_getAllByType(Text);
render(<Banana />);
const [text, status, button] = screen.UNSAFE_getAllByType(Text);
const InExistent = () => null;
expect(text.props.children).toBe('Is the banana fresh?');
expect(status.props.children).toBe('not fresh');
expect(button.props.children).toBe('Change freshness!');
expect(() => UNSAFE_getAllByType(InExistent)).toThrow('No instances found');
expect(() => screen.UNSAFE_getAllByType(InExistent)).toThrow('No instances found');
expect(UNSAFE_queryAllByType(Text)[1]).toBe(status);
expect(UNSAFE_queryAllByType(InExistent)).toHaveLength(0);
expect(screen.UNSAFE_queryAllByType(Text)[1]).toBe(status);
expect(screen.UNSAFE_queryAllByType(InExistent)).toHaveLength(0);
});
test('UNSAFE_getByProps, UNSAFE_queryByProps', () => {
const { UNSAFE_getByProps, UNSAFE_queryByProps } = render(<Banana />);
const primaryType = UNSAFE_getByProps({ type: 'primary' });
render(<Banana />);
const primaryType = screen.UNSAFE_getByProps({ type: 'primary' });
expect(primaryType.props.children).toBe('Change freshness!');
expect(() => UNSAFE_getByProps({ type: 'inexistent' })).toThrow('No instances found');
expect(() => screen.UNSAFE_getByProps({ type: 'inexistent' })).toThrow('No instances found');
expect(UNSAFE_queryByProps({ type: 'primary' })).toBe(primaryType);
expect(UNSAFE_queryByProps({ type: 'inexistent' })).toBeNull();
expect(screen.UNSAFE_queryByProps({ type: 'primary' })).toBe(primaryType);
expect(screen.UNSAFE_queryByProps({ type: 'inexistent' })).toBeNull();
});
test('UNSAFE_getAllByProp, UNSAFE_queryAllByProps', () => {
const { UNSAFE_getAllByProps, UNSAFE_queryAllByProps } = render(<Banana />);
const primaryTypes = UNSAFE_getAllByProps({ type: 'primary' });
render(<Banana />);
const primaryTypes = screen.UNSAFE_getAllByProps({ type: 'primary' });
expect(primaryTypes).toHaveLength(1);
expect(() => UNSAFE_getAllByProps({ type: 'inexistent' })).toThrow('No instances found');
expect(() => screen.UNSAFE_getAllByProps({ type: 'inexistent' })).toThrow('No instances found');
expect(UNSAFE_queryAllByProps({ type: 'primary' })).toEqual(primaryTypes);
expect(UNSAFE_queryAllByProps({ type: 'inexistent' })).toHaveLength(0);
expect(screen.UNSAFE_queryAllByProps({ type: 'primary' })).toEqual(primaryTypes);
expect(screen.UNSAFE_queryAllByProps({ type: 'inexistent' })).toHaveLength(0);
});
test('update', () => {
const fn = jest.fn();
const { getByText, update, rerender } = render(<Banana onUpdate={fn} />);
render(<Banana onUpdate={fn} />);
fireEvent.press(getByText('Change freshness!'));
fireEvent.press(screen.getByText('Change freshness!'));
update(<Banana onUpdate={fn} />);
rerender(<Banana onUpdate={fn} />);
screen.update(<Banana onUpdate={fn} />);
screen.rerender(<Banana onUpdate={fn} />);
expect(fn).toHaveBeenCalledTimes(3);
});
test('unmount', () => {
const fn = jest.fn();
const { unmount } = render(<Banana onUnmount={fn} />);
unmount();
render(<Banana onUnmount={fn} />);
screen.unmount();
expect(fn).toHaveBeenCalled();
});
@@ -136,16 +136,16 @@ test('unmount should handle cleanup functions', () => {
return null;
};
const { unmount } = render(<Component />);
render(<Component />);
unmount();
screen.unmount();
expect(cleanup).toHaveBeenCalledTimes(1);
});
test('toJSON renders host output', () => {
const { toJSON } = render(<MyButton>press me</MyButton>);
expect(toJSON()).toMatchSnapshot();
render(<MyButton>press me</MyButton>);
expect(screen.toJSON()).toMatchSnapshot();
});
test('renders options.wrapper around node', () => {
@@ -154,12 +154,12 @@ test('renders options.wrapper around node', () => {
<View testID="wrapper">{children}</View>
);
const { toJSON, getByTestId } = render(<View testID="inner" />, {
render(<View testID="inner" />, {
wrapper: WrapperComponent,
});
expect(getByTestId('wrapper')).toBeTruthy();
expect(toJSON()).toMatchInlineSnapshot(`
expect(screen.getByTestId('wrapper')).toBeTruthy();
expect(screen.toJSON()).toMatchInlineSnapshot(`
<View
testID="wrapper"
>
@@ -176,14 +176,14 @@ test('renders options.wrapper around updated node', () => {
<View testID="wrapper">{children}</View>
);
const { toJSON, getByTestId, rerender } = render(<View testID="inner" />, {
render(<View testID="inner" />, {
wrapper: WrapperComponent,
});
rerender(<View testID="inner" accessibilityLabel="test" accessibilityHint="test" />);
screen.rerender(<View testID="inner" accessibilityLabel="test" accessibilityHint="test" />);
expect(getByTestId('wrapper')).toBeTruthy();
expect(toJSON()).toMatchInlineSnapshot(`
expect(screen.getByTestId('wrapper')).toBeTruthy();
expect(screen.toJSON()).toMatchInlineSnapshot(`
<View
testID="wrapper"
>
@@ -197,29 +197,24 @@ test('renders options.wrapper around updated node', () => {
});
test('returns host root', () => {
const { root } = render(<View testID="inner" />);
render(<View testID="inner" />);
expect(root).toBeDefined();
expect(root.type).toBe('View');
expect(root.props.testID).toBe('inner');
expect(screen.root).toBeDefined();
expect(screen.root.type).toBe('View');
expect(screen.root.props.testID).toBe('inner');
});
test('returns composite UNSAFE_root', () => {
const { UNSAFE_root } = render(<View testID="inner" />);
render(<View testID="inner" />);
expect(UNSAFE_root).toBeDefined();
expect(UNSAFE_root.type).toBe(View);
expect(UNSAFE_root.props.testID).toBe('inner');
expect(screen.UNSAFE_root).toBeDefined();
expect(screen.UNSAFE_root.type).toBe(View);
expect(screen.UNSAFE_root.props.testID).toBe('inner');
});
test('container displays deprecation', () => {
const view = render(<View testID="inner" />);
render(<View testID="inner" />);
expect(() => (view as any).container).toThrowErrorMatchingInlineSnapshot(`
"'container' property has been renamed to 'UNSAFE_root'.
Consider using 'root' property which returns root host element."
`);
expect(() => (screen as any).container).toThrowErrorMatchingInlineSnapshot(`
"'container' property has been renamed to 'UNSAFE_root'.
src/__tests__/wait-for-element-to-be-removed.test.tsx
+8 -8
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { render, fireEvent, waitForElementToBeRemoved } from '..';
import { Text, TouchableOpacity, View } from 'react-native';
import { fireEvent, render, screen, waitForElementToBeRemoved } from '..';
const TestSetup = ({ shouldUseDelay = true }) => {
const [isAdded, setIsAdded] = useState(true);
@@ -29,7 +29,7 @@ afterEach(() => {
});
test('waits when using getBy query', async () => {
const screen = render(<TestSetup />);
render(<TestSetup />);
fireEvent.press(screen.getByText('Remove Element'));
const element = screen.getByText('Observed Element');
@@ -41,7 +41,7 @@ test('waits when using getBy query', async () => {
});
test('waits when using getAllBy query', async () => {
const screen = render(<TestSetup />);
render(<TestSetup />);
fireEvent.press(screen.getByText('Remove Element'));
const elements = screen.getAllByText('Observed Element');
@@ -53,7 +53,7 @@ test('waits when using getAllBy query', async () => {
});
test('waits when using queryBy query', async () => {
const screen = render(<TestSetup />);
render(<TestSetup />);
fireEvent.press(screen.getByText('Remove Element'));
const element = screen.getByText('Observed Element');
@@ -65,7 +65,7 @@ test('waits when using queryBy query', async () => {
});
test('waits when using queryAllBy query', async () => {
const screen = render(<TestSetup />);
render(<TestSetup />);
fireEvent.press(screen.getByText('Remove Element'));
const elements = screen.getAllByText('Observed Element');
@@ -77,7 +77,7 @@ test('waits when using queryAllBy query', async () => {
});
test('checks if elements exist at start', async () => {
const screen = render(<TestSetup shouldUseDelay={false} />);
render(<TestSetup shouldUseDelay={false} />);
fireEvent.press(screen.getByText('Remove Element'));
expect(screen.queryByText('Observed Element')).toBeNull();
@@ -90,7 +90,7 @@ test('checks if elements exist at start', async () => {
});
test('waits until timeout', async () => {
const screen = render(<TestSetup />);
render(<TestSetup />);
fireEvent.press(screen.getByText('Remove Element'));
expect(screen.getByText('Observed Element')).toBeTruthy();
src/__tests__/wait-for.test.tsx
+27 -27
View File
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Text, TouchableOpacity, View, Pressable } from 'react-native';
import { fireEvent, render, waitFor, configure } from '..';
import { fireEvent, render, waitFor, configure, screen } from '..';
class Banana extends React.Component<any> {
changeFresh = () => {
@@ -37,51 +37,51 @@ afterEach(() => {
});
test('waits for element until it stops throwing', async () => {
const { getByText, queryByText } = render(<BananaContainer />);
render(<BananaContainer />);
fireEvent.press(getByText('Change freshness!'));
fireEvent.press(screen.getByText('Change freshness!'));
expect(queryByText('Fresh')).toBeNull();
expect(screen.queryByText('Fresh')).toBeNull();
const freshBananaText = await waitFor(() => getByText('Fresh'));
const freshBananaText = await waitFor(() => screen.getByText('Fresh'));
expect(freshBananaText.props.children).toBe('Fresh');
});
test('waits for element until timeout is met', async () => {
const { getByText } = render(<BananaContainer />);
render(<BananaContainer />);
fireEvent.press(getByText('Change freshness!'));
fireEvent.press(screen.getByText('Change freshness!'));
await expect(waitFor(() => getByText('Fresh'), { timeout: 100 })).rejects.toThrow();
await expect(waitFor(() => screen.getByText('Fresh'), { timeout: 100 })).rejects.toThrow();
// Async action ends after 300ms and we only waited 100ms, so we need to wait
// for the remaining async actions to finish
await waitFor(() => getByText('Fresh'));
await waitFor(() => screen.getByText('Fresh'));
});
test('waitFor defaults to asyncWaitTimeout config option', async () => {
configure({ asyncUtilTimeout: 100 });
const { getByText } = render(<BananaContainer />);
render(<BananaContainer />);
fireEvent.press(getByText('Change freshness!'));
await expect(waitFor(() => getByText('Fresh'))).rejects.toThrow();
fireEvent.press(screen.getByText('Change freshness!'));
await expect(waitFor(() => screen.getByText('Fresh'))).rejects.toThrow();
// Async action ends after 300ms and we only waited 100ms, so we need to wait
// for the remaining async actions to finish
await waitFor(() => getByText('Fresh'), { timeout: 1000 });
await waitFor(() => screen.getByText('Fresh'), { timeout: 1000 });
});
test('waitFor timeout option takes precendence over `asyncWaitTimeout` config option', async () => {
configure({ asyncUtilTimeout: 2000 });
const { getByText } = render(<BananaContainer />);
render(<BananaContainer />);
fireEvent.press(getByText('Change freshness!'));
await expect(waitFor(() => getByText('Fresh'), { timeout: 100 })).rejects.toThrow();
fireEvent.press(screen.getByText('Change freshness!'));
await expect(waitFor(() => screen.getByText('Fresh'), { timeout: 100 })).rejects.toThrow();
// Async action ends after 300ms and we only waited 100ms, so we need to wait
// for the remaining async actions to finish
await waitFor(() => getByText('Fresh'));
await waitFor(() => screen.getByText('Fresh'));
});
test('waits for element with custom interval', async () => {
@@ -124,9 +124,9 @@ const Comp = ({ onPress }: { onPress: () => void }) => {
test('waits for async event with fireEvent', async () => {
const spy = jest.fn();
const { getByText } = render(<Comp onPress={spy} />);
render(<Comp onPress={spy} />);
fireEvent.press(getByText('Trigger'));
fireEvent.press(screen.getByText('Trigger'));
await waitFor(() => {
expect(spy).toHaveBeenCalled();
@@ -137,13 +137,13 @@ test.each([false, true])(
'waits for element until it stops throwing using fake timers (legacyFakeTimers = %s)',
async (legacyFakeTimers) => {
jest.useFakeTimers({ legacyFakeTimers });
const { getByText, queryByText } = render(<BananaContainer />);
render(<BananaContainer />);
fireEvent.press(getByText('Change freshness!'));
expect(queryByText('Fresh')).toBeNull();
fireEvent.press(screen.getByText('Change freshness!'));
expect(screen.queryByText('Fresh')).toBeNull();
jest.advanceTimersByTime(300);
const freshBananaText = await waitFor(() => getByText('Fresh'));
const freshBananaText = await waitFor(() => screen.getByText('Fresh'));
expect(freshBananaText.props.children).toBe('Fresh');
}
@@ -293,18 +293,18 @@ test.each([
}
const onPress = jest.fn();
const view = render(<Apple onPress={onPress} />);
render(<Apple onPress={onPress} />);
// Required: this `waitFor` will succeed on first check, because the "root" view is there
// since the initial mount.
await waitFor(() => view.getByTestId('root'));
await waitFor(() => screen.getByTestId('root'));
// This `waitFor` will also succeed on first check, because the promise that sets the
// `color` state to "red" resolves right after the previous `await waitFor` statement.
await waitFor(() => view.getByText('red'));
await waitFor(() => screen.getByText('red'));
// Check that the `onPress` callback is called with the already-updated value of `syncedColor`.
fireEvent.press(view.getByText('Trigger'));
fireEvent.press(screen.getByText('Trigger'));
expect(onPress).toHaveBeenCalledWith('red');
}
);
src/helpers/__tests__/accessiblity.test.tsx
+63 -63
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { View, Text, TextInput, Pressable, Switch, TouchableOpacity } from 'react-native';
import { render, isHiddenFromAccessibility, isInaccessible } from '../..';
import { render, isHiddenFromAccessibility, isInaccessible, screen } from '../..';
import { isAccessibilityElement } from '../accessiblity';
describe('isHiddenFromAccessibility', () => {
@@ -35,10 +35,10 @@ describe('isHiddenFromAccessibility', () => {
});
test('detects elements with aria-hidden prop', () => {
const view = render(<View testID="subject" aria-hidden />);
render(<View testID="subject" aria-hidden />);
expect(
isHiddenFromAccessibility(
view.getByTestId('subject', {
screen.getByTestId('subject', {
includeHiddenElements: true,
})
)
@@ -46,14 +46,14 @@ describe('isHiddenFromAccessibility', () => {
});
test('detects nested elements with aria-hidden prop', () => {
const view = render(
render(
<View aria-hidden>
<View testID="subject" />
</View>
);
expect(
isHiddenFromAccessibility(
view.getByTestId('subject', {
screen.getByTestId('subject', {
includeHiddenElements: true,
})
)
@@ -61,10 +61,10 @@ describe('isHiddenFromAccessibility', () => {
});
test('detects elements with accessibilityElementsHidden prop', () => {
const view = render(<View testID="subject" accessibilityElementsHidden />);
render(<View testID="subject" accessibilityElementsHidden />);
expect(
isHiddenFromAccessibility(
view.getByTestId('subject', {
screen.getByTestId('subject', {
includeHiddenElements: true,
})
)
@@ -72,14 +72,14 @@ describe('isHiddenFromAccessibility', () => {
});
test('detects nested elements with accessibilityElementsHidden prop', () => {
const view = render(
render(
<View accessibilityElementsHidden>
<View testID="subject" />
</View>
);
expect(
isHiddenFromAccessibility(
view.getByTestId('subject', {
screen.getByTestId('subject', {
includeHiddenElements: true,
})
)
@@ -87,7 +87,7 @@ describe('isHiddenFromAccessibility', () => {
});
test('detects deeply nested elements with accessibilityElementsHidden prop', () => {
const view = render(
render(
<View accessibilityElementsHidden>
<View>
<View>
@@ -98,7 +98,7 @@ describe('isHiddenFromAccessibility', () => {
);
expect(
isHiddenFromAccessibility(
view.getByTestId('subject', {
screen.getByTestId('subject', {
includeHiddenElements: true,
})
)
@@ -106,10 +106,10 @@ describe('isHiddenFromAccessibility', () => {
});
test('detects elements with importantForAccessibility="no-hide-descendants" prop', () => {
const view = render(<View testID="subject" importantForAccessibility="no-hide-descendants" />);
render(<View testID="subject" importantForAccessibility="no-hide-descendants" />);
expect(
isHiddenFromAccessibility(
view.getByTestId('subject', {
screen.getByTestId('subject', {
includeHiddenElements: true,
})
)
@@ -117,14 +117,14 @@ describe('isHiddenFromAccessibility', () => {
});
test('detects nested elements with importantForAccessibility="no-hide-descendants" prop', () => {
const view = render(
render(
<View importantForAccessibility="no-hide-descendants">
<View testID="subject" />
</View>
);
expect(
isHiddenFromAccessibility(
view.getByTestId('subject', {
screen.getByTestId('subject', {
includeHiddenElements: true,
})
)
@@ -132,10 +132,10 @@ describe('isHiddenFromAccessibility', () => {
});
test('detects elements with display=none', () => {
const view = render(<View testID="subject" style={{ display: 'none' }} />);
render(<View testID="subject" style={{ display: 'none' }} />);
expect(
isHiddenFromAccessibility(
view.getByTestId('subject', {
screen.getByTestId('subject', {
includeHiddenElements: true,
})
)
@@ -143,14 +143,14 @@ describe('isHiddenFromAccessibility', () => {
});
test('detects nested elements with display=none', () => {
const view = render(
render(
<View style={{ display: 'none' }}>
<View testID="subject" />
</View>
);
expect(
isHiddenFromAccessibility(
view.getByTestId('subject', {
screen.getByTestId('subject', {
includeHiddenElements: true,
})
)
@@ -158,7 +158,7 @@ describe('isHiddenFromAccessibility', () => {
});
test('detects deeply nested elements with display=none', () => {
const view = render(
render(
<View style={{ display: 'none' }}>
<View>
<View>
@@ -169,7 +169,7 @@ describe('isHiddenFromAccessibility', () => {
);
expect(
isHiddenFromAccessibility(
view.getByTestId('subject', {
screen.getByTestId('subject', {
includeHiddenElements: true,
})
)
@@ -177,7 +177,7 @@ describe('isHiddenFromAccessibility', () => {
});
test('detects elements with display=none with complex style', () => {
const view = render(
render(
<View
testID="subject"
style={[{ display: 'flex' }, [{ display: 'flex' }], { display: 'none' }]}
@@ -185,7 +185,7 @@ describe('isHiddenFromAccessibility', () => {
);
expect(
isHiddenFromAccessibility(
view.getByTestId('subject', {
screen.getByTestId('subject', {
includeHiddenElements: true,
})
)
@@ -193,10 +193,10 @@ describe('isHiddenFromAccessibility', () => {
});
test('is not trigged by opacity = 0', () => {
const view = render(<View testID="subject" style={{ opacity: 0 }} />);
render(<View testID="subject" style={{ opacity: 0 }} />);
expect(
isHiddenFromAccessibility(
view.getByTestId('subject', {
screen.getByTestId('subject', {
includeHiddenElements: true,
})
)
@@ -204,7 +204,7 @@ describe('isHiddenFromAccessibility', () => {
});
test('detects siblings of element with accessibilityViewIsModal prop', () => {
const view = render(
render(
<View>
<View accessibilityViewIsModal />
<View testID="subject" />
@@ -212,7 +212,7 @@ describe('isHiddenFromAccessibility', () => {
);
expect(
isHiddenFromAccessibility(
view.getByTestId('subject', {
screen.getByTestId('subject', {
includeHiddenElements: true,
})
)
@@ -220,7 +220,7 @@ describe('isHiddenFromAccessibility', () => {
});
test('detects deeply nested siblings of element with accessibilityViewIsModal prop', () => {
const view = render(
render(
<View>
<View accessibilityViewIsModal />
<View>
@@ -231,38 +231,38 @@ describe('isHiddenFromAccessibility', () => {
</View>
);
expect(
isHiddenFromAccessibility(view.getByTestId('subject', { includeHiddenElements: true }))
isHiddenFromAccessibility(screen.getByTestId('subject', { includeHiddenElements: true }))
).toBe(true);
});
test('detects siblings of element with "aria-modal" prop', () => {
const view = render(
render(
<View>
<View aria-modal />
<View testID="subject" />
</View>
);
expect(
isHiddenFromAccessibility(view.getByTestId('subject', { includeHiddenElements: true }))
isHiddenFromAccessibility(screen.getByTestId('subject', { includeHiddenElements: true }))
).toBe(true);
});
test('is not triggered for element with accessibilityViewIsModal prop', () => {
const view = render(<View accessibilityViewIsModal testID="subject" />);
expect(isHiddenFromAccessibility(view.getByTestId('subject'))).toBe(false);
render(<View accessibilityViewIsModal testID="subject" />);
expect(isHiddenFromAccessibility(screen.getByTestId('subject'))).toBe(false);
});
test('is not triggered for child of element with accessibilityViewIsModal prop', () => {
const view = render(
render(
<View accessibilityViewIsModal>
<View testID="subject" />
</View>
);
expect(isHiddenFromAccessibility(view.getByTestId('subject'))).toBe(false);
expect(isHiddenFromAccessibility(screen.getByTestId('subject'))).toBe(false);
});
test('is not triggered for descendent of element with accessibilityViewIsModal prop', () => {
const view = render(
render(
<View accessibilityViewIsModal>
<View>
<View>
@@ -271,7 +271,7 @@ describe('isHiddenFromAccessibility', () => {
</View>
</View>
);
expect(isHiddenFromAccessibility(view.getByTestId('subject'))).toBe(false);
expect(isHiddenFromAccessibility(screen.getByTestId('subject'))).toBe(false);
});
test('has isInaccessible alias', () => {
@@ -280,39 +280,39 @@ describe('isHiddenFromAccessibility', () => {
});
test('is not triggered for element with "aria-modal" prop', () => {
const view = render(<View aria-modal testID="subject" />);
expect(isHiddenFromAccessibility(view.getByTestId('subject'))).toBe(false);
render(<View aria-modal testID="subject" />);
expect(isHiddenFromAccessibility(screen.getByTestId('subject'))).toBe(false);
});
describe('isAccessibilityElement', () => {
test('matches View component properly', () => {
const { getByTestId } = render(
render(
<View>
<View testID="default" />
<View testID="true" accessible />
<View testID="false" accessible={false} />
</View>
);
expect(isAccessibilityElement(getByTestId('default'))).toBeFalsy();
expect(isAccessibilityElement(getByTestId('true'))).toBeTruthy();
expect(isAccessibilityElement(getByTestId('false'))).toBeFalsy();
expect(isAccessibilityElement(screen.getByTestId('default'))).toBeFalsy();
expect(isAccessibilityElement(screen.getByTestId('true'))).toBeTruthy();
expect(isAccessibilityElement(screen.getByTestId('false'))).toBeFalsy();
});
test('matches TextInput component properly', () => {
const { getByTestId } = render(
render(
<View>
<TextInput testID="default" />
<TextInput testID="true" accessible />
<TextInput testID="false" accessible={false} />
</View>
);
expect(isAccessibilityElement(getByTestId('default'))).toBeTruthy();
expect(isAccessibilityElement(getByTestId('true'))).toBeTruthy();
expect(isAccessibilityElement(getByTestId('false'))).toBeFalsy();
expect(isAccessibilityElement(screen.getByTestId('default'))).toBeTruthy();
expect(isAccessibilityElement(screen.getByTestId('true'))).toBeTruthy();
expect(isAccessibilityElement(screen.getByTestId('false'))).toBeFalsy();
});
test('matches Text component properly', () => {
const { getByTestId } = render(
render(
<View>
<Text testID="default">Default</Text>
<Text testID="true" accessible>
@@ -323,48 +323,48 @@ describe('isAccessibilityElement', () => {
</Text>
</View>
);
expect(isAccessibilityElement(getByTestId('default'))).toBeTruthy();
expect(isAccessibilityElement(getByTestId('true'))).toBeTruthy();
expect(isAccessibilityElement(getByTestId('false'))).toBeFalsy();
expect(isAccessibilityElement(screen.getByTestId('default'))).toBeTruthy();
expect(isAccessibilityElement(screen.getByTestId('true'))).toBeTruthy();
expect(isAccessibilityElement(screen.getByTestId('false'))).toBeFalsy();
});
test('matches Switch component properly', () => {
const { getByTestId } = render(
render(
<View>
<Switch testID="default" />
<Switch testID="true" accessible />
<Switch testID="false" accessible={false} />
</View>
);
expect(isAccessibilityElement(getByTestId('default'))).toBeTruthy();
expect(isAccessibilityElement(getByTestId('true'))).toBeTruthy();
expect(isAccessibilityElement(getByTestId('false'))).toBeFalsy();
expect(isAccessibilityElement(screen.getByTestId('default'))).toBeTruthy();
expect(isAccessibilityElement(screen.getByTestId('true'))).toBeTruthy();
expect(isAccessibilityElement(screen.getByTestId('false'))).toBeFalsy();
});
test('matches Pressable component properly', () => {
const { getByTestId } = render(
render(
<View>
<Pressable testID="default" />
<Pressable testID="true" accessible />
<Pressable testID="false" accessible={false} />
</View>
);
expect(isAccessibilityElement(getByTestId('default'))).toBeTruthy();
expect(isAccessibilityElement(getByTestId('true'))).toBeTruthy();
expect(isAccessibilityElement(getByTestId('false'))).toBeFalsy();
expect(isAccessibilityElement(screen.getByTestId('default'))).toBeTruthy();
expect(isAccessibilityElement(screen.getByTestId('true'))).toBeTruthy();
expect(isAccessibilityElement(screen.getByTestId('false'))).toBeFalsy();
});
test('matches TouchableOpacity component properly', () => {
const { getByTestId } = render(
render(
<View>
<TouchableOpacity testID="default" />
<TouchableOpacity testID="true" accessible />
<TouchableOpacity testID="false" accessible={false} />
</View>
);
expect(isAccessibilityElement(getByTestId('default'))).toBeTruthy();
expect(isAccessibilityElement(getByTestId('true'))).toBeTruthy();
expect(isAccessibilityElement(getByTestId('false'))).toBeFalsy();
expect(isAccessibilityElement(screen.getByTestId('default'))).toBeTruthy();
expect(isAccessibilityElement(screen.getByTestId('true'))).toBeTruthy();
expect(isAccessibilityElement(screen.getByTestId('false'))).toBeFalsy();
});
test('returns false when given null', () => {
src/helpers/__tests__/component-tree.test.tsx
+51 -51
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { View, Text, TextInput } from 'react-native';
import { render } from '../..';
import { Text, TextInput, View } from 'react-native';
import { render, screen } from '../..';
import {
getHostChildren,
getHostParent,
@@ -25,7 +25,7 @@ function MultipleHostChildren() {
describe('getHostParent()', () => {
it('returns host parent for host component', () => {
const view = render(
render(
<View testID="grandparent">
<View testID="parent">
<View testID="subject" />
@@ -34,11 +34,11 @@ describe('getHostParent()', () => {
</View>
);
const hostParent = getHostParent(view.getByTestId('subject'));
expect(hostParent).toBe(view.getByTestId('parent'));
const hostParent = getHostParent(screen.getByTestId('subject'));
expect(hostParent).toBe(screen.getByTestId('parent'));
const hostGrandparent = getHostParent(hostParent);
expect(hostGrandparent).toBe(view.getByTestId('grandparent'));
expect(hostGrandparent).toBe(screen.getByTestId('grandparent'));
expect(getHostParent(hostGrandparent)).toBe(null);
});
@@ -48,22 +48,22 @@ describe('getHostParent()', () => {
});
it('returns host parent for composite component', () => {
const view = render(
render(
<View testID="parent">
<MultipleHostChildren />
<View testID="subject" />
</View>
);
const compositeComponent = view.UNSAFE_getByType(MultipleHostChildren);
const compositeComponent = screen.UNSAFE_getByType(MultipleHostChildren);
const hostParent = getHostParent(compositeComponent);
expect(hostParent).toBe(view.getByTestId('parent'));
expect(hostParent).toBe(screen.getByTestId('parent'));
});
});
describe('getHostChildren()', () => {
it('returns host children for host component', () => {
const view = render(
render(
<View testID="grandparent">
<View testID="parent">
<View testID="subject" />
@@ -72,21 +72,21 @@ describe('getHostChildren()', () => {
</View>
);
const hostSubject = view.getByTestId('subject');
const hostSubject = screen.getByTestId('subject');
expect(getHostChildren(hostSubject)).toEqual([]);
const hostSibling = view.getByTestId('sibling');
const hostSibling = screen.getByTestId('sibling');
expect(getHostChildren(hostSibling)).toEqual([]);
const hostParent = view.getByTestId('parent');
const hostParent = screen.getByTestId('parent');
expect(getHostChildren(hostParent)).toEqual([hostSubject, hostSibling]);
const hostGrandparent = view.getByTestId('grandparent');
const hostGrandparent = screen.getByTestId('grandparent');
expect(getHostChildren(hostGrandparent)).toEqual([hostParent]);
});
it('returns host children for composite component', () => {
const view = render(
render(
<View testID="parent">
<MultipleHostChildren />
<View testID="subject" />
@@ -94,19 +94,19 @@ describe('getHostChildren()', () => {
</View>
);
expect(getHostChildren(view.getByTestId('parent'))).toEqual([
view.getByTestId('child1'),
view.getByTestId('child2'),
view.getByTestId('child3'),
view.getByTestId('subject'),
view.getByTestId('sibling'),
expect(getHostChildren(screen.getByTestId('parent'))).toEqual([
screen.getByTestId('child1'),
screen.getByTestId('child2'),
screen.getByTestId('child3'),
screen.getByTestId('subject'),
screen.getByTestId('sibling'),
]);
});
});
describe('getHostSelves()', () => {
it('returns passed element for host components', () => {
const view = render(
render(
<View testID="grandparent">
<View testID="parent">
<View testID="subject" />
@@ -115,21 +115,21 @@ describe('getHostSelves()', () => {
</View>
);
const hostSubject = view.getByTestId('subject');
const hostSubject = screen.getByTestId('subject');
expect(getHostSelves(hostSubject)).toEqual([hostSubject]);
const hostSibling = view.getByTestId('sibling');
const hostSibling = screen.getByTestId('sibling');
expect(getHostSelves(hostSibling)).toEqual([hostSibling]);
const hostParent = view.getByTestId('parent');
const hostParent = screen.getByTestId('parent');
expect(getHostSelves(hostParent)).toEqual([hostParent]);
const hostGrandparent = view.getByTestId('grandparent');
const hostGrandparent = screen.getByTestId('grandparent');
expect(getHostSelves(hostGrandparent)).toEqual([hostGrandparent]);
});
test('returns single host element for React Native composite components', () => {
const view = render(
render(
<View testID="parent">
<Text testID="text">Text</Text>
<TextInput
@@ -140,20 +140,20 @@ describe('getHostSelves()', () => {
</View>
);
const compositeText = view.getByText('Text');
const hostText = view.getByTestId('text');
const compositeText = screen.getByText('Text');
const hostText = screen.getByTestId('text');
expect(getHostSelves(compositeText)).toEqual([hostText]);
const compositeTextInputByValue = view.getByDisplayValue('TextInputValue');
const compositeTextInputByPlaceholder = view.getByPlaceholderText('TextInputPlaceholder');
const compositeTextInputByValue = screen.getByDisplayValue('TextInputValue');
const compositeTextInputByPlaceholder = screen.getByPlaceholderText('TextInputPlaceholder');
const hostTextInput = view.getByTestId('textInput');
const hostTextInput = screen.getByTestId('textInput');
expect(getHostSelves(compositeTextInputByValue)).toEqual([hostTextInput]);
expect(getHostSelves(compositeTextInputByPlaceholder)).toEqual([hostTextInput]);
});
test('returns host children for custom composite components', () => {
const view = render(
render(
<View testID="parent">
<ZeroHostChildren />
<MultipleHostChildren />
@@ -161,20 +161,20 @@ describe('getHostSelves()', () => {
</View>
);
const zeroCompositeComponent = view.UNSAFE_getByType(ZeroHostChildren);
const zeroCompositeComponent = screen.UNSAFE_getByType(ZeroHostChildren);
expect(getHostSelves(zeroCompositeComponent)).toEqual([]);
const multipleCompositeComponent = view.UNSAFE_getByType(MultipleHostChildren);
const hostChild1 = view.getByTestId('child1');
const hostChild2 = view.getByTestId('child2');
const hostChild3 = view.getByTestId('child3');
const multipleCompositeComponent = screen.UNSAFE_getByType(MultipleHostChildren);
const hostChild1 = screen.getByTestId('child1');
const hostChild2 = screen.getByTestId('child2');
const hostChild3 = screen.getByTestId('child3');
expect(getHostSelves(multipleCompositeComponent)).toEqual([hostChild1, hostChild2, hostChild3]);
});
});
describe('getHostSiblings()', () => {
it('returns host siblings for host component', () => {
const view = render(
render(
<View testID="grandparent">
<View testID="parent">
<View testID="siblingBefore" />
@@ -185,18 +185,18 @@ describe('getHostSiblings()', () => {
</View>
);
const hostSiblings = getHostSiblings(view.getByTestId('subject'));
const hostSiblings = getHostSiblings(screen.getByTestId('subject'));
expect(hostSiblings).toEqual([
view.getByTestId('siblingBefore'),
view.getByTestId('siblingAfter'),
view.getByTestId('child1'),
view.getByTestId('child2'),
view.getByTestId('child3'),
screen.getByTestId('siblingBefore'),
screen.getByTestId('siblingAfter'),
screen.getByTestId('child1'),
screen.getByTestId('child2'),
screen.getByTestId('child3'),
]);
});
it('returns host siblings for composite component', () => {
const view = render(
render(
<View testID="grandparent">
<View testID="parent">
<View testID="siblingBefore" />
@@ -207,19 +207,19 @@ describe('getHostSiblings()', () => {
</View>
);
const compositeComponent = view.UNSAFE_getByType(MultipleHostChildren);
const compositeComponent = screen.UNSAFE_getByType(MultipleHostChildren);
const hostSiblings = getHostSiblings(compositeComponent);
expect(hostSiblings).toEqual([
view.getByTestId('siblingBefore'),
view.getByTestId('subject'),
view.getByTestId('siblingAfter'),
screen.getByTestId('siblingBefore'),
screen.getByTestId('subject'),
screen.getByTestId('siblingAfter'),
]);
});
});
describe('getUnsafeRootElement()', () => {
it('returns UNSAFE_root for mounted view', () => {
const screen = render(
render(
<View>
<View testID="view" />
</View>
src/helpers/__tests__/text-content.test.tsx
+11 -11
View File
@@ -1,11 +1,11 @@
import * as React from 'react';
import { Text } from 'react-native';
import render from '../../render';
import { render, screen } from '../../';
import { getTextContent } from '../text-content';
test('getTextContent with simple content', () => {
const view = render(<Text>Hello world</Text>);
expect(getTextContent(view.root)).toBe('Hello world');
render(<Text>Hello world</Text>);
expect(getTextContent(screen.root)).toBe('Hello world');
});
test('getTextContent with null element', () => {
@@ -13,37 +13,37 @@ test('getTextContent with null element', () => {
});
test('getTextContent with single nested content', () => {
const view = render(
render(
<Text>
<Text>Hello world</Text>
</Text>
);
expect(getTextContent(view.root)).toBe('Hello world');
expect(getTextContent(screen.root)).toBe('Hello world');
});
test('getTextContent with multiple nested content', () => {
const view = render(
render(
<Text>
<Text>Hello</Text> <Text>world</Text>
</Text>
);
expect(getTextContent(view.root)).toBe('Hello world');
expect(getTextContent(screen.root)).toBe('Hello world');
});
test('getTextContent with multiple number content', () => {
const view = render(
render(
<Text>
<Text>Hello</Text> <Text>world</Text> <Text>{100}</Text>
</Text>
);
expect(getTextContent(view.root)).toBe('Hello world 100');
expect(getTextContent(screen.root)).toBe('Hello world 100');
});
test('getTextContent with multiple boolean content', () => {
const view = render(
render(
<Text>
<Text>Hello{false}</Text> <Text>{true}world</Text>
</Text>
);
expect(getTextContent(view.root)).toBe('Hello world');
expect(getTextContent(screen.root)).toBe('Hello world');
});
src/matchers/__tests__/to-be-disabled.test.tsx
+8 -8
View File
@@ -10,11 +10,11 @@ import {
Text,
View,
} from 'react-native';
import { render } from '../..';
import { render, screen } from '../..';
import '../extend-expect';
test('toBeDisabled()/toBeEnabled() supports basic case', () => {
const screen = render(
render(
<View>
<View testID="disabled-parent" aria-disabled>
<View>
@@ -88,7 +88,7 @@ test('toBeDisabled()/toBeEnabled() supports basic case', () => {
});
test('toBeDisabled()/toBeEnabled() supports Pressable with "disabled" prop', () => {
const screen = render(
render(
<Pressable disabled testID="subject">
<Text>Button</Text>
</Pressable>
@@ -158,7 +158,7 @@ test.each([
['TouchableWithoutFeedback', TouchableWithoutFeedback],
['TouchableNativeFeedback', TouchableNativeFeedback],
] as const)('toBeDisabled()/toBeEnabled() supports %s with "disabled" prop', (_, Component) => {
const screen = render(
render(
// @ts-expect-error disabled prop is not available on all Touchables
<Component disabled testID="subject">
<Text>Button</Text>
@@ -190,7 +190,7 @@ test.each([
] as const)(
'toBeDisabled()/toBeEnabled() supports %s with "aria-disabled" prop',
(_, Component) => {
const screen = render(
render(
// @ts-expect-error too generic for typescript
<Component testID="subject" aria-disabled>
<Text>Hello</Text>
@@ -217,7 +217,7 @@ test.each([
] as const)(
'toBeDisabled()/toBeEnabled() supports %s with "accessibilityState.disabled" prop',
(_, Component) => {
const screen = render(
render(
// @ts-expect-error disabled prop is not available on all Touchables
<Component testID="subject" accessibilityState={{ disabled: true }}>
<Text>Hello</Text>
@@ -233,7 +233,7 @@ test.each([
);
test('toBeDisabled()/toBeEnabled() supports "editable" prop on TextInput', () => {
const screen = render(
render(
<View>
<TextInput testID="enabled-by-default" />
<TextInput testID="enabled" editable />
@@ -251,7 +251,7 @@ test('toBeDisabled()/toBeEnabled() supports "editable" prop on TextInput', () =>
});
test('toBeDisabled()/toBeEnabled() supports "disabled" prop on Button', () => {
const screen = render(
render(
<View>
<Button testID="enabled" title="enabled" />
<Button testID="disabled" title="disabled" disabled />
src/matchers/__tests__/to-have-style.test.tsx
+6 -6
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { StyleSheet, View, Pressable } from 'react-native';
import { render } from '../..';
import { render, screen } from '../..';
import '../extend-expect';
const styles = StyleSheet.create({
@@ -8,7 +8,7 @@ const styles = StyleSheet.create({
});
test('toHaveStyle() handles basic cases', () => {
const screen = render(
render(
<View
testID="view"
style={[
@@ -50,7 +50,7 @@ test('toHaveStyle() handles basic cases', () => {
});
test('toHaveStyle error messages', () => {
const screen = render(
render(
<View
testID="view"
style={{
@@ -129,14 +129,14 @@ test('toHaveStyle error messages', () => {
});
test('toHaveStyle() supports missing "style" prop', () => {
const screen = render(<View testID="view" />);
render(<View testID="view" />);
const view = screen.getByTestId('view');
expect(view).not.toHaveStyle({ fontWeight: 'bold' });
});
test('toHaveStyle() supports undefined "transform" style', () => {
const screen = render(
render(
<View
testID="view"
style={{
@@ -164,7 +164,7 @@ test('toHaveStyle() supports undefined "transform" style', () => {
});
test('toHaveStyle() supports Pressable with function "style" prop', () => {
const screen = render(<Pressable testID="view" style={() => ({ backgroundColor: 'blue' })} />);
render(<Pressable testID="view" style={() => ({ backgroundColor: 'blue' })} />);
expect(screen.getByTestId('view')).toHaveStyle({ backgroundColor: 'blue' });
});
src/matchers/__tests__/utils.test.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
import React from 'react';
import { View } from 'react-native';
import { render } from '../..';
import { formatElement, checkHostElement } from '../utils';
import { render, screen } from '../..';
import { checkHostElement, formatElement } from '../utils';
function fakeMatcher() {
// Do nothing.
@@ -12,7 +12,7 @@ test('formatElement', () => {
});
test('checkHostElement allows host element', () => {
const screen = render(<View testID="view" />);
render(<View testID="view" />);
expect(() => {
// @ts-expect-error
@@ -21,7 +21,7 @@ test('checkHostElement allows host element', () => {
});
test('checkHostElement allows rejects composite element', () => {
const screen = render(<View testID="view" />);
render(<View testID="view" />);
expect(() => {
// @ts-expect-error
src/queries/__tests__/accessibility-state.test.tsx
+123 -119
View File
@@ -1,7 +1,7 @@
/* eslint-disable no-console */
import * as React from 'react';
import { View, Text, Pressable, TouchableOpacity } from 'react-native';
import { render } from '../..';
import { render, screen } from '../..';
type ConsoleLogMock = jest.Mock<typeof console.log>;
@@ -29,213 +29,215 @@ const Section = () => (
);
test('getByA11yState, queryByA11yState, findByA11yState', async () => {
const { getByA11yState, queryByA11yState, findByA11yState } = render(<Section />);
render(<Section />);
expect(getByA11yState({ selected: true }).props.accessibilityState).toEqual({
expect(screen.getByA11yState({ selected: true }).props.accessibilityState).toEqual({
selected: true,
expanded: false,
});
expect(queryByA11yState({ selected: true })?.props.accessibilityState).toEqual({
expect(screen.queryByA11yState({ selected: true })?.props.accessibilityState).toEqual({
selected: true,
expanded: false,
});
expect(() => getByA11yState({ disabled: true })).toThrow(
expect(() => screen.getByA11yState({ disabled: true })).toThrow(
'Unable to find an element with disabled state: true'
);
expect(queryByA11yState({ disabled: true })).toEqual(null);
expect(screen.queryByA11yState({ disabled: true })).toEqual(null);
expect(() => getByA11yState({ expanded: false })).toThrow(
expect(() => screen.getByA11yState({ expanded: false })).toThrow(
'Found multiple elements with expanded state: false'
);
expect(() => queryByA11yState({ expanded: false })).toThrow(
expect(() => screen.queryByA11yState({ expanded: false })).toThrow(
'Found multiple elements with expanded state: false'
);
const asyncButton = await findByA11yState({ selected: true });
const asyncButton = await screen.findByA11yState({ selected: true });
expect(asyncButton.props.accessibilityState).toEqual({
selected: true,
expanded: false,
});
await expect(findByA11yState({ disabled: true })).rejects.toThrow(
await expect(screen.findByA11yState({ disabled: true })).rejects.toThrow(
'Unable to find an element with disabled state: true'
);
await expect(findByA11yState({ expanded: false })).rejects.toThrow(
await expect(screen.findByA11yState({ expanded: false })).rejects.toThrow(
'Found multiple elements with expanded state: false'
);
});
test('getAllByA11yState, queryAllByA11yState, findAllByA11yState', async () => {
const { getAllByA11yState, queryAllByA11yState, findAllByA11yState } = render(<Section />);
render(<Section />);
expect(getAllByA11yState({ selected: true })).toHaveLength(1);
expect(queryAllByA11yState({ selected: true })).toHaveLength(1);
expect(screen.getAllByA11yState({ selected: true })).toHaveLength(1);
expect(screen.queryAllByA11yState({ selected: true })).toHaveLength(1);
expect(() => getAllByA11yState({ disabled: true })).toThrow(
expect(() => screen.getAllByA11yState({ disabled: true })).toThrow(
'Unable to find an element with disabled state: true'
);
expect(queryAllByA11yState({ disabled: true })).toEqual([]);
expect(screen.queryAllByA11yState({ disabled: true })).toEqual([]);
expect(getAllByA11yState({ expanded: false })).toHaveLength(2);
expect(queryAllByA11yState({ expanded: false })).toHaveLength(2);
expect(screen.getAllByA11yState({ expanded: false })).toHaveLength(2);
expect(screen.queryAllByA11yState({ expanded: false })).toHaveLength(2);
await expect(findAllByA11yState({ selected: true })).resolves.toHaveLength(1);
await expect(findAllByA11yState({ disabled: true })).rejects.toThrow(
await expect(screen.findAllByA11yState({ selected: true })).resolves.toHaveLength(1);
await expect(screen.findAllByA11yState({ disabled: true })).rejects.toThrow(
'Unable to find an element with disabled state: true'
);
await expect(findAllByA11yState({ expanded: false })).resolves.toHaveLength(2);
await expect(screen.findAllByA11yState({ expanded: false })).resolves.toHaveLength(2);
});
describe('checked state matching', () => {
it('handles true', () => {
const view = render(<View accessibilityState={{ checked: true }} />);
render(<View accessibilityState={{ checked: true }} />);
expect(view.getByA11yState({ checked: true })).toBeTruthy();
expect(view.queryByA11yState({ checked: 'mixed' })).toBeFalsy();
expect(view.queryByA11yState({ checked: false })).toBeFalsy();
expect(screen.getByA11yState({ checked: true })).toBeTruthy();
expect(screen.queryByA11yState({ checked: 'mixed' })).toBeFalsy();
expect(screen.queryByA11yState({ checked: false })).toBeFalsy();
});
it('handles mixed', () => {
const view = render(<View accessibilityState={{ checked: 'mixed' }} />);
render(<View accessibilityState={{ checked: 'mixed' }} />);
expect(view.getByA11yState({ checked: 'mixed' })).toBeTruthy();
expect(view.queryByA11yState({ checked: true })).toBeFalsy();
expect(view.queryByA11yState({ checked: false })).toBeFalsy();
expect(screen.getByA11yState({ checked: 'mixed' })).toBeTruthy();
expect(screen.queryByA11yState({ checked: true })).toBeFalsy();
expect(screen.queryByA11yState({ checked: false })).toBeFalsy();
});
it('handles false', () => {
const view = render(<View accessibilityState={{ checked: false }} />);
render(<View accessibilityState={{ checked: false }} />);
expect(view.getByA11yState({ checked: false })).toBeTruthy();
expect(view.queryByA11yState({ checked: true })).toBeFalsy();
expect(view.queryByA11yState({ checked: 'mixed' })).toBeFalsy();
expect(screen.getByA11yState({ checked: false })).toBeTruthy();
expect(screen.queryByA11yState({ checked: true })).toBeFalsy();
expect(screen.queryByA11yState({ checked: 'mixed' })).toBeFalsy();
});
it('handles default', () => {
const view = render(<View accessibilityState={{}} />);
render(<View accessibilityState={{}} />);
expect(view.queryByA11yState({ checked: false })).toBeFalsy();
expect(view.queryByA11yState({ checked: true })).toBeFalsy();
expect(view.queryByA11yState({ checked: 'mixed' })).toBeFalsy();
expect(screen.queryByA11yState({ checked: false })).toBeFalsy();
expect(screen.queryByA11yState({ checked: true })).toBeFalsy();
expect(screen.queryByA11yState({ checked: 'mixed' })).toBeFalsy();
});
});
describe('expanded state matching', () => {
it('handles true', () => {
const view = render(<View accessibilityState={{ expanded: true }} />);
render(<View accessibilityState={{ expanded: true }} />);
expect(view.getByA11yState({ expanded: true })).toBeTruthy();
expect(view.queryByA11yState({ expanded: false })).toBeFalsy();
expect(screen.getByA11yState({ expanded: true })).toBeTruthy();
expect(screen.queryByA11yState({ expanded: false })).toBeFalsy();
});
it('handles false', () => {
const view = render(<View accessibilityState={{ expanded: false }} />);
render(<View accessibilityState={{ expanded: false }} />);
expect(view.getByA11yState({ expanded: false })).toBeTruthy();
expect(view.queryByA11yState({ expanded: true })).toBeFalsy();
expect(screen.getByA11yState({ expanded: false })).toBeTruthy();
expect(screen.queryByA11yState({ expanded: true })).toBeFalsy();
});
it('handles default', () => {
const view = render(<View accessibilityState={{}} />);
render(<View accessibilityState={{}} />);
expect(view.queryByA11yState({ expanded: false })).toBeFalsy();
expect(view.queryByA11yState({ expanded: true })).toBeFalsy();
expect(screen.queryByA11yState({ expanded: false })).toBeFalsy();
expect(screen.queryByA11yState({ expanded: true })).toBeFalsy();
});
});
describe('disabled state matching', () => {
it('handles true', () => {
const view = render(<View accessibilityState={{ disabled: true }} />);
render(<View accessibilityState={{ disabled: true }} />);
expect(view.getByA11yState({ disabled: true })).toBeTruthy();
expect(view.queryByA11yState({ disabled: false })).toBeFalsy();
expect(screen.getByA11yState({ disabled: true })).toBeTruthy();
expect(screen.queryByA11yState({ disabled: false })).toBeFalsy();
});
it('handles false', () => {
const view = render(<View accessibilityState={{ disabled: false }} />);
render(<View accessibilityState={{ disabled: false }} />);
expect(view.getByA11yState({ disabled: false })).toBeTruthy();
expect(view.queryByA11yState({ disabled: true })).toBeFalsy();
expect(screen.getByA11yState({ disabled: false })).toBeTruthy();
expect(screen.queryByA11yState({ disabled: true })).toBeFalsy();
});
it('handles default', () => {
const view = render(<View accessibilityState={{}} />);
render(<View accessibilityState={{}} />);
expect(view.getByA11yState({ disabled: false })).toBeTruthy();
expect(view.queryByA11yState({ disabled: true })).toBeFalsy();
expect(screen.getByA11yState({ disabled: false })).toBeTruthy();
expect(screen.queryByA11yState({ disabled: true })).toBeFalsy();
});
});
describe('busy state matching', () => {
it('handles true', () => {
const view = render(<View accessibilityState={{ busy: true }} />);
render(<View accessibilityState={{ busy: true }} />);
expect(view.getByA11yState({ busy: true })).toBeTruthy();
expect(view.queryByA11yState({ busy: false })).toBeFalsy();
expect(screen.getByA11yState({ busy: true })).toBeTruthy();
expect(screen.queryByA11yState({ busy: false })).toBeFalsy();
});
it('handles false', () => {
const view = render(<View accessibilityState={{ busy: false }} />);
render(<View accessibilityState={{ busy: false }} />);
expect(view.getByA11yState({ busy: false })).toBeTruthy();
expect(view.queryByA11yState({ busy: true })).toBeFalsy();
expect(screen.getByA11yState({ busy: false })).toBeTruthy();
expect(screen.queryByA11yState({ busy: true })).toBeFalsy();
});
it('handles default', () => {
const view = render(<View accessibilityState={{}} />);
render(<View accessibilityState={{}} />);
expect(view.getByA11yState({ busy: false })).toBeTruthy();
expect(view.queryByA11yState({ busy: true })).toBeFalsy();
expect(screen.getByA11yState({ busy: false })).toBeTruthy();
expect(screen.queryByA11yState({ busy: true })).toBeFalsy();
});
});
describe('selected state matching', () => {
it('handles true', () => {
const view = render(<View accessibilityState={{ selected: true }} />);
render(<View accessibilityState={{ selected: true }} />);
expect(view.getByA11yState({ selected: true })).toBeTruthy();
expect(view.queryByA11yState({ selected: false })).toBeFalsy();
expect(screen.getByA11yState({ selected: true })).toBeTruthy();
expect(screen.queryByA11yState({ selected: false })).toBeFalsy();
});
it('handles false', () => {
const view = render(<View accessibilityState={{ selected: false }} />);
render(<View accessibilityState={{ selected: false }} />);
expect(view.getByA11yState({ selected: false })).toBeTruthy();
expect(view.queryByA11yState({ selected: true })).toBeFalsy();
expect(screen.getByA11yState({ selected: false })).toBeTruthy();
expect(screen.queryByA11yState({ selected: true })).toBeFalsy();
});
it('handles default', () => {
const view = render(<View accessibilityState={{}} />);
render(<View accessibilityState={{}} />);
expect(view.getByA11yState({ selected: false })).toBeTruthy();
expect(view.queryByA11yState({ selected: true })).toBeFalsy();
expect(screen.getByA11yState({ selected: false })).toBeTruthy();
expect(screen.queryByA11yState({ selected: true })).toBeFalsy();
});
});
test('*ByA11yState on Pressable with "disabled" prop', () => {
const view = render(<Pressable disabled />);
expect(view.getByA11yState({ disabled: true })).toBeTruthy();
expect(view.queryByA11yState({ disabled: false })).toBeFalsy();
render(<Pressable disabled />);
expect(screen.getByA11yState({ disabled: true })).toBeTruthy();
expect(screen.queryByA11yState({ disabled: false })).toBeFalsy();
});
test('*ByA11yState on TouchableOpacity with "disabled" prop', () => {
const view = render(<TouchableOpacity disabled />);
expect(view.getByA11yState({ disabled: true })).toBeTruthy();
expect(view.queryByA11yState({ disabled: false })).toBeFalsy();
render(<TouchableOpacity disabled />);
expect(screen.getByA11yState({ disabled: true })).toBeTruthy();
expect(screen.queryByA11yState({ disabled: false })).toBeFalsy();
});
test('byA11yState queries support hidden option', () => {
const { getByA11yState, queryByA11yState } = render(
render(
<Pressable accessibilityState={{ expanded: false }} style={{ display: 'none' }}>
<Text>Hidden from accessibility</Text>
</Pressable>
);
expect(getByA11yState({ expanded: false }, { includeHiddenElements: true })).toBeTruthy();
expect(screen.getByA11yState({ expanded: false }, { includeHiddenElements: true })).toBeTruthy();
expect(queryByA11yState({ expanded: false })).toBeFalsy();
expect(queryByA11yState({ expanded: false }, { includeHiddenElements: false })).toBeFalsy();
expect(() => getByA11yState({ expanded: false }, { includeHiddenElements: false }))
expect(screen.queryByA11yState({ expanded: false })).toBeFalsy();
expect(
screen.queryByA11yState({ expanded: false }, { includeHiddenElements: false })
).toBeFalsy();
expect(() => screen.getByA11yState({ expanded: false }, { includeHiddenElements: false }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with expanded state: false
@@ -261,44 +263,44 @@ test('byA11yState queries support hidden option', () => {
test('*ByA11yState deprecation warnings', async () => {
const mockCalls = (console.warn as ConsoleLogMock).mock.calls;
const view = render(<View accessibilityState={{ disabled: true }} />);
render(<View accessibilityState={{ disabled: true }} />);
view.getByA11yState({ disabled: true });
screen.getByA11yState({ disabled: true });
expect(mockCalls[0][0]).toMatchInlineSnapshot(`
"getByA11yState(...) is deprecated and will be removed in the future.
Use getByRole(role, { disabled, selected, checked, busy, expanded }) query or built-in Jest matchers: toBeDisabled(), toBeSelected(), toBeChecked(), toBeBusy(), and toBeExpanded() instead."
`);
view.getAllByA11yState({ disabled: true });
screen.getAllByA11yState({ disabled: true });
expect(mockCalls[1][0]).toMatchInlineSnapshot(`
"getAllByA11yState(...) is deprecated and will be removed in the future.
Use getAllByRole(role, { disabled, selected, checked, busy, expanded }) query or built-in Jest matchers: toBeDisabled(), toBeSelected(), toBeChecked(), toBeBusy(), and toBeExpanded() instead."
`);
view.queryByA11yState({ disabled: true });
screen.queryByA11yState({ disabled: true });
expect(mockCalls[2][0]).toMatchInlineSnapshot(`
"queryByA11yState(...) is deprecated and will be removed in the future.
Use queryByRole(role, { disabled, selected, checked, busy, expanded }) query or built-in Jest matchers: toBeDisabled(), toBeSelected(), toBeChecked(), toBeBusy(), and toBeExpanded() instead."
`);
view.queryAllByA11yState({ disabled: true });
screen.queryAllByA11yState({ disabled: true });
expect(mockCalls[3][0]).toMatchInlineSnapshot(`
"queryAllByA11yState(...) is deprecated and will be removed in the future.
Use queryAllByRole(role, { disabled, selected, checked, busy, expanded }) query or built-in Jest matchers: toBeDisabled(), toBeSelected(), toBeChecked(), toBeBusy(), and toBeExpanded() instead."
`);
await view.findByA11yState({ disabled: true });
await screen.findByA11yState({ disabled: true });
expect(mockCalls[4][0]).toMatchInlineSnapshot(`
"findByA11yState(...) is deprecated and will be removed in the future.
Use findByRole(role, { disabled, selected, checked, busy, expanded }) query or built-in Jest matchers: toBeDisabled(), toBeSelected(), toBeChecked(), toBeBusy(), and toBeExpanded() instead."
`);
await view.findAllByA11yState({ disabled: true });
await screen.findAllByA11yState({ disabled: true });
expect(mockCalls[5][0]).toMatchInlineSnapshot(`
"findAllByA11yState(...) is deprecated and will be removed in the future.
@@ -308,44 +310,44 @@ test('*ByA11yState deprecation warnings', async () => {
test('*ByAccessibilityState deprecation warnings', async () => {
const mockCalls = (console.warn as ConsoleLogMock).mock.calls;
const view = render(<View accessibilityState={{ disabled: true }} />);
render(<View accessibilityState={{ disabled: true }} />);
view.getByAccessibilityState({ disabled: true });
screen.getByAccessibilityState({ disabled: true });
expect(mockCalls[0][0]).toMatchInlineSnapshot(`
"getByAccessibilityState(...) is deprecated and will be removed in the future.
Use getByRole(role, { disabled, selected, checked, busy, expanded }) query or built-in Jest matchers: toBeDisabled(), toBeSelected(), toBeChecked(), toBeBusy(), and toBeExpanded() instead."
`);
view.getAllByAccessibilityState({ disabled: true });
screen.getAllByAccessibilityState({ disabled: true });
expect(mockCalls[1][0]).toMatchInlineSnapshot(`
"getAllByAccessibilityState(...) is deprecated and will be removed in the future.
Use getAllByRole(role, { disabled, selected, checked, busy, expanded }) query or built-in Jest matchers: toBeDisabled(), toBeSelected(), toBeChecked(), toBeBusy(), and toBeExpanded() instead."
`);
view.queryByAccessibilityState({ disabled: true });
screen.queryByAccessibilityState({ disabled: true });
expect(mockCalls[2][0]).toMatchInlineSnapshot(`
"queryByAccessibilityState(...) is deprecated and will be removed in the future.
Use queryByRole(role, { disabled, selected, checked, busy, expanded }) query or built-in Jest matchers: toBeDisabled(), toBeSelected(), toBeChecked(), toBeBusy(), and toBeExpanded() instead."
`);
view.queryAllByAccessibilityState({ disabled: true });
screen.queryAllByAccessibilityState({ disabled: true });
expect(mockCalls[3][0]).toMatchInlineSnapshot(`
"queryAllByAccessibilityState(...) is deprecated and will be removed in the future.
Use queryAllByRole(role, { disabled, selected, checked, busy, expanded }) query or built-in Jest matchers: toBeDisabled(), toBeSelected(), toBeChecked(), toBeBusy(), and toBeExpanded() instead."
`);
await view.findByAccessibilityState({ disabled: true });
await screen.findByAccessibilityState({ disabled: true });
expect(mockCalls[4][0]).toMatchInlineSnapshot(`
"findByAccessibilityState(...) is deprecated and will be removed in the future.
Use findByRole(role, { disabled, selected, checked, busy, expanded }) query or built-in Jest matchers: toBeDisabled(), toBeSelected(), toBeChecked(), toBeBusy(), and toBeExpanded() instead."
`);
await view.findAllByAccessibilityState({ disabled: true });
await screen.findAllByAccessibilityState({ disabled: true });
expect(mockCalls[5][0]).toMatchInlineSnapshot(`
"findAllByAccessibilityState(...) is deprecated and will be removed in the future.
@@ -354,13 +356,13 @@ test('*ByAccessibilityState deprecation warnings', async () => {
});
test('error message renders the element tree, preserving only helpful props', async () => {
const view = render(
render(
<Text accessibilityState={{ checked: false }} onPress={() => null}>
Some text
</Text>
);
expect(() => view.getByA11yState({ checked: true })).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByA11yState({ checked: true })).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with checked state: true
<Text
@@ -374,7 +376,7 @@ test('error message renders the element tree, preserving only helpful props', as
</Text>"
`);
expect(() => view.getAllByA11yState({ checked: true })).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getAllByA11yState({ checked: true })).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with checked state: true
<Text
@@ -388,7 +390,8 @@ test('error message renders the element tree, preserving only helpful props', as
</Text>"
`);
await expect(view.findByA11yState({ checked: true })).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findByA11yState({ checked: true })).rejects
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with checked state: true
<Text
@@ -402,7 +405,7 @@ test('error message renders the element tree, preserving only helpful props', as
</Text>"
`);
await expect(view.findAllByA11yState({ checked: true })).rejects
await expect(screen.findAllByA11yState({ checked: true })).rejects
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with checked state: true
@@ -420,19 +423,19 @@ test('error message renders the element tree, preserving only helpful props', as
describe('aria-disabled prop', () => {
test('supports aria-disabled={true} prop', () => {
const screen = render(<View accessible aria-disabled={true} />);
render(<View accessible aria-disabled={true} />);
expect(screen.getByAccessibilityState({ disabled: true })).toBeTruthy();
expect(screen.queryByAccessibilityState({ disabled: false })).toBeNull();
});
test('supports aria-disabled={false} prop', () => {
const screen = render(<View accessible aria-disabled={false} />);
render(<View accessible aria-disabled={false} />);
expect(screen.getByAccessibilityState({ disabled: false })).toBeTruthy();
expect(screen.queryByAccessibilityState({ disabled: true })).toBeNull();
});
test('supports default aria-disabled prop', () => {
const screen = render(<View accessible />);
render(<View accessible />);
expect(screen.getByAccessibilityState({ disabled: false })).toBeTruthy();
expect(screen.queryByAccessibilityState({ disabled: true })).toBeNull();
});
@@ -440,19 +443,19 @@ describe('aria-disabled prop', () => {
describe('aria-selected prop', () => {
test('supports aria-selected={true} prop', () => {
const screen = render(<View accessible aria-selected={true} />);
render(<View accessible aria-selected={true} />);
expect(screen.getByAccessibilityState({ selected: true })).toBeTruthy();
expect(screen.queryByAccessibilityState({ selected: false })).toBeNull();
});
test('supports aria-selected={false} prop', () => {
const screen = render(<View accessible aria-selected={false} />);
render(<View accessible aria-selected={false} />);
expect(screen.getByAccessibilityState({ selected: false })).toBeTruthy();
expect(screen.queryByAccessibilityState({ selected: true })).toBeNull();
});
test('supports default aria-selected prop', () => {
const screen = render(<View accessible />);
render(<View accessible />);
expect(screen.getByAccessibilityState({ selected: false })).toBeTruthy();
expect(screen.queryByAccessibilityState({ selected: true })).toBeNull();
});
@@ -460,28 +463,28 @@ describe('aria-selected prop', () => {
describe('aria-checked prop', () => {
test('supports aria-checked={true} prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-checked={true} />);
render(<View accessible accessibilityRole="button" aria-checked={true} />);
expect(screen.getByAccessibilityState({ checked: true })).toBeTruthy();
expect(screen.queryByAccessibilityState({ checked: false })).toBeNull();
expect(screen.queryByAccessibilityState({ checked: 'mixed' })).toBeNull();
});
test('supports aria-checked={false} prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-checked={false} />);
render(<View accessible accessibilityRole="button" aria-checked={false} />);
expect(screen.getByAccessibilityState({ checked: false })).toBeTruthy();
expect(screen.queryByAccessibilityState({ checked: true })).toBeNull();
expect(screen.queryByAccessibilityState({ checked: 'mixed' })).toBeNull();
});
test('supports aria-checked="mixed prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-checked="mixed" />);
render(<View accessible accessibilityRole="button" aria-checked="mixed" />);
expect(screen.getByAccessibilityState({ checked: 'mixed' })).toBeTruthy();
expect(screen.queryByAccessibilityState({ checked: true })).toBeNull();
expect(screen.queryByAccessibilityState({ checked: false })).toBeNull();
});
test('supports default aria-selected prop', () => {
const screen = render(<View accessible accessibilityRole="button" />);
render(<View accessible accessibilityRole="button" />);
expect(screen.getByAccessibilityState({})).toBeTruthy();
expect(screen.queryByAccessibilityState({ checked: true })).toBeNull();
expect(screen.queryByAccessibilityState({ checked: false })).toBeNull();
@@ -491,19 +494,19 @@ describe('aria-checked prop', () => {
describe('aria-busy prop', () => {
test('supports aria-busy={true} prop', () => {
const screen = render(<View accessible aria-busy={true} />);
render(<View accessible aria-busy={true} />);
expect(screen.getByAccessibilityState({ busy: true })).toBeTruthy();
expect(screen.queryByAccessibilityState({ busy: false })).toBeNull();
});
test('supports aria-busy={false} prop', () => {
const screen = render(<View accessible aria-busy={false} />);
render(<View accessible aria-busy={false} />);
expect(screen.getByAccessibilityState({ busy: false })).toBeTruthy();
expect(screen.queryByAccessibilityState({ busy: true })).toBeNull();
});
test('supports default aria-busy prop', () => {
const screen = render(<View accessible />);
render(<View accessible />);
expect(screen.getByAccessibilityState({ busy: false })).toBeTruthy();
expect(screen.queryByAccessibilityState({ busy: true })).toBeNull();
});
@@ -511,19 +514,20 @@ describe('aria-busy prop', () => {
describe('aria-expanded prop', () => {
test('supports aria-expanded={true} prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-expanded={true} />);
render(<View accessible accessibilityRole="button" aria-expanded={true} />);
expect(screen.getByAccessibilityState({ expanded: true })).toBeTruthy();
expect(screen.queryByAccessibilityState({ expanded: false })).toBeNull();
});
test('supports aria-expanded={false} prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-expanded={false} />);
render(<View accessible accessibilityRole="button" aria-expanded={false} />);
expect(screen.getByAccessibilityState({ expanded: false })).toBeTruthy();
expect(screen.queryByAccessibilityState({ expanded: true })).toBeNull();
});
test('supports default aria-expanded prop', () => {
const screen = render(<View accessible accessibilityRole="button" />);
render(<View accessible accessibilityRole="button" />);
render(<View accessible accessibilityRole="button" />);
expect(screen.getByAccessibilityState({})).toBeTruthy();
expect(screen.queryByAccessibilityState({ expanded: true })).toBeNull();
expect(screen.queryByAccessibilityState({ expanded: false })).toBeNull();
src/queries/__tests__/accessibility-value.test.tsx
+63 -56
View File
@@ -1,7 +1,7 @@
/* eslint-disable no-console */
import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { render } from '../..';
import { Text, TouchableOpacity, View } from 'react-native';
import { render, screen } from '../..';
type ConsoleLogMock = jest.Mock<typeof console.log>;
@@ -29,69 +29,75 @@ const Section = () => (
);
test('getByA11yValue, queryByA11yValue, findByA11yValue', async () => {
const { getByA11yValue, queryByA11yValue, findByA11yValue } = render(<Section />);
render(<Section />);
expect(getByA11yValue({ min: 40 }).props.accessibilityValue).toEqual({
expect(screen.getByA11yValue({ min: 40 }).props.accessibilityValue).toEqual({
min: 40,
max: 60,
});
expect(queryByA11yValue({ min: 40 })?.props.accessibilityValue).toEqual({
expect(screen.queryByA11yValue({ min: 40 })?.props.accessibilityValue).toEqual({
min: 40,
max: 60,
});
expect(() => getByA11yValue({ min: 50 })).toThrow('Unable to find an element with min value: 50');
expect(queryByA11yValue({ min: 50 })).toEqual(null);
expect(() => screen.getByA11yValue({ min: 50 })).toThrow(
'Unable to find an element with min value: 50'
);
expect(screen.queryByA11yValue({ min: 50 })).toEqual(null);
expect(() => getByA11yValue({ max: 60 })).toThrow('Found multiple elements with max value: 60');
expect(() => queryByA11yValue({ max: 60 })).toThrow('Found multiple elements with max value: 60');
expect(() => screen.getByA11yValue({ max: 60 })).toThrow(
'Found multiple elements with max value: 60'
);
expect(() => screen.queryByA11yValue({ max: 60 })).toThrow(
'Found multiple elements with max value: 60'
);
const asyncElement = await findByA11yValue({ min: 40 });
const asyncElement = await screen.findByA11yValue({ min: 40 });
expect(asyncElement.props.accessibilityValue).toEqual({
min: 40,
max: 60,
});
await expect(findByA11yValue({ min: 50 })).rejects.toThrow(
await expect(screen.findByA11yValue({ min: 50 })).rejects.toThrow(
'Unable to find an element with min value: 50'
);
await expect(findByA11yValue({ max: 60 })).rejects.toThrow(
await expect(screen.findByA11yValue({ max: 60 })).rejects.toThrow(
'Found multiple elements with max value: 60'
);
});
test('getAllByA11yValue, queryAllByA11yValue, findAllByA11yValue', async () => {
const { getAllByA11yValue, queryAllByA11yValue, findAllByA11yValue } = render(<Section />);
render(<Section />);
expect(getAllByA11yValue({ min: 40 })).toHaveLength(1);
expect(queryAllByA11yValue({ min: 40 })).toHaveLength(1);
expect(screen.getAllByA11yValue({ min: 40 })).toHaveLength(1);
expect(screen.queryAllByA11yValue({ min: 40 })).toHaveLength(1);
expect(() => getAllByA11yValue({ min: 50 })).toThrow(
expect(() => screen.getAllByA11yValue({ min: 50 })).toThrow(
'Unable to find an element with min value: 50'
);
expect(queryAllByA11yValue({ min: 50 })).toEqual([]);
expect(screen.queryAllByA11yValue({ min: 50 })).toEqual([]);
expect(queryAllByA11yValue({ max: 60 })).toHaveLength(2);
expect(getAllByA11yValue({ max: 60 })).toHaveLength(2);
expect(screen.queryAllByA11yValue({ max: 60 })).toHaveLength(2);
expect(screen.getAllByA11yValue({ max: 60 })).toHaveLength(2);
await expect(findAllByA11yValue({ min: 40 })).resolves.toHaveLength(1);
await expect(findAllByA11yValue({ min: 50 })).rejects.toThrow(
await expect(screen.findAllByA11yValue({ min: 40 })).resolves.toHaveLength(1);
await expect(screen.findAllByA11yValue({ min: 50 })).rejects.toThrow(
'Unable to find an element with min value: 50'
);
await expect(findAllByA11yValue({ max: 60 })).resolves.toHaveLength(2);
await expect(screen.findAllByA11yValue({ max: 60 })).resolves.toHaveLength(2);
});
test('byA11yValue queries support hidden option', () => {
const { getByA11yValue, queryByA11yValue } = render(
render(
<Text accessibilityValue={{ max: 10 }} style={{ display: 'none' }}>
Hidden from accessibility
</Text>
);
expect(getByA11yValue({ max: 10 }, { includeHiddenElements: true })).toBeTruthy();
expect(screen.getByA11yValue({ max: 10 }, { includeHiddenElements: true })).toBeTruthy();
expect(queryByA11yValue({ max: 10 })).toBeFalsy();
expect(queryByA11yValue({ max: 10 }, { includeHiddenElements: false })).toBeFalsy();
expect(() => getByA11yValue({ max: 10 }, { includeHiddenElements: false }))
expect(screen.queryByA11yValue({ max: 10 })).toBeFalsy();
expect(screen.queryByA11yValue({ max: 10 }, { includeHiddenElements: false })).toBeFalsy();
expect(() => screen.getByA11yValue({ max: 10 }, { includeHiddenElements: false }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with max value: 10
@@ -113,23 +119,24 @@ test('byA11yValue queries support hidden option', () => {
});
test('byA11yValue error messages', () => {
const { getByA11yValue } = render(<View />);
expect(() => getByA11yValue({ min: 10, max: 10 })).toThrowErrorMatchingInlineSnapshot(`
render(<View />);
expect(() => screen.getByA11yValue({ min: 10, max: 10 })).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with min value: 10, max value: 10
<View />"
`);
expect(() => getByA11yValue({ max: 20, now: 5 })).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByA11yValue({ max: 20, now: 5 })).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with max value: 20, now value: 5
<View />"
`);
expect(() => getByA11yValue({ min: 1, max: 2, now: 3 })).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByA11yValue({ min: 1, max: 2, now: 3 }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with min value: 1, max value: 2, now value: 3
<View />"
`);
expect(() => getByA11yValue({ min: 1, max: 2, now: 3, text: /foo/i }))
expect(() => screen.getByA11yValue({ min: 1, max: 2, now: 3, text: /foo/i }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with min value: 1, max value: 2, now value: 3, text value: /foo/i
@@ -139,44 +146,44 @@ test('byA11yValue error messages', () => {
test('*ByA11yValue deprecation warnings', async () => {
const mockCalls = (console.warn as ConsoleLogMock).mock.calls;
const view = render(<View accessibilityValue={{ min: 10 }} />);
render(<View accessibilityValue={{ min: 10 }} />);
view.getByA11yValue({ min: 10 });
screen.getByA11yValue({ min: 10 });
expect(mockCalls[0][0]).toMatchInlineSnapshot(`
"getByA11yValue(...) is deprecated and will be removed in the future.
Use toHaveAccessibilityValue(...) built-in Jest matcher or getByRole(role, { value: ... }) query instead."
`);
view.getAllByA11yValue({ min: 10 });
screen.getAllByA11yValue({ min: 10 });
expect(mockCalls[1][0]).toMatchInlineSnapshot(`
"getAllByA11yValue(...) is deprecated and will be removed in the future.
Use toHaveAccessibilityValue(...) built-in Jest matcher or getAllByRole(role, { value: ... }) query instead."
`);
view.queryByA11yValue({ min: 10 });
screen.queryByA11yValue({ min: 10 });
expect(mockCalls[2][0]).toMatchInlineSnapshot(`
"queryByA11yValue(...) is deprecated and will be removed in the future.
Use toHaveAccessibilityValue(...) built-in Jest matcher or queryByRole(role, { value: ... }) query instead."
`);
view.queryAllByA11yValue({ min: 10 });
screen.queryAllByA11yValue({ min: 10 });
expect(mockCalls[3][0]).toMatchInlineSnapshot(`
"queryAllByA11yValue(...) is deprecated and will be removed in the future.
Use toHaveAccessibilityValue(...) built-in Jest matcher or queryAllByRole(role, { value: ... }) query instead."
`);
await view.findByA11yValue({ min: 10 });
await screen.findByA11yValue({ min: 10 });
expect(mockCalls[4][0]).toMatchInlineSnapshot(`
"findByA11yValue(...) is deprecated and will be removed in the future.
Use toHaveAccessibilityValue(...) built-in Jest matcher or findByRole(role, { value: ... }) query instead."
`);
await view.findAllByA11yValue({ min: 10 });
await screen.findAllByA11yValue({ min: 10 });
expect(mockCalls[5][0]).toMatchInlineSnapshot(`
"findAllByA11yValue(...) is deprecated and will be removed in the future.
@@ -186,44 +193,44 @@ test('*ByA11yValue deprecation warnings', async () => {
test('*ByAccessibilityValue deprecation warnings', async () => {
const mockCalls = (console.warn as ConsoleLogMock).mock.calls;
const view = render(<View accessibilityValue={{ min: 10 }} />);
render(<View accessibilityValue={{ min: 10 }} />);
view.getByAccessibilityValue({ min: 10 });
screen.getByAccessibilityValue({ min: 10 });
expect(mockCalls[0][0]).toMatchInlineSnapshot(`
"getByAccessibilityValue(...) is deprecated and will be removed in the future.
Use toHaveAccessibilityValue(...) built-in Jest matcher or getByRole(role, { value: ... }) query instead."
`);
view.getAllByAccessibilityValue({ min: 10 });
screen.getAllByAccessibilityValue({ min: 10 });
expect(mockCalls[1][0]).toMatchInlineSnapshot(`
"getAllByAccessibilityValue(...) is deprecated and will be removed in the future.
Use toHaveAccessibilityValue(...) built-in Jest matcher or getAllByRole(role, { value: ... }) query instead."
`);
view.queryByAccessibilityValue({ min: 10 });
screen.queryByAccessibilityValue({ min: 10 });
expect(mockCalls[2][0]).toMatchInlineSnapshot(`
"queryByAccessibilityValue(...) is deprecated and will be removed in the future.
Use toHaveAccessibilityValue(...) built-in Jest matcher or queryByRole(role, { value: ... }) query instead."
`);
view.queryAllByAccessibilityValue({ min: 10 });
screen.queryAllByAccessibilityValue({ min: 10 });
expect(mockCalls[3][0]).toMatchInlineSnapshot(`
"queryAllByAccessibilityValue(...) is deprecated and will be removed in the future.
Use toHaveAccessibilityValue(...) built-in Jest matcher or queryAllByRole(role, { value: ... }) query instead."
`);
await view.findByAccessibilityValue({ min: 10 });
await screen.findByAccessibilityValue({ min: 10 });
expect(mockCalls[4][0]).toMatchInlineSnapshot(`
"findByAccessibilityValue(...) is deprecated and will be removed in the future.
Use toHaveAccessibilityValue(...) built-in Jest matcher or findByRole(role, { value: ... }) query instead."
`);
await view.findAllByAccessibilityValue({ min: 10 });
await screen.findAllByAccessibilityValue({ min: 10 });
expect(mockCalls[5][0]).toMatchInlineSnapshot(`
"findAllByAccessibilityValue(...) is deprecated and will be removed in the future.
@@ -232,9 +239,9 @@ test('*ByAccessibilityValue deprecation warnings', async () => {
});
test('error message renders the element tree, preserving only helpful props', async () => {
const view = render(<View accessibilityValue={{ min: 2 }} key="NOT_RELEVANT" />);
render(<View accessibilityValue={{ min: 2 }} key="NOT_RELEVANT" />);
expect(() => view.getByA11yValue({ min: 1 })).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByA11yValue({ min: 1 })).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with min value: 1
<View
@@ -246,7 +253,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
expect(() => view.getAllByA11yValue({ min: 1 })).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getAllByA11yValue({ min: 1 })).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with min value: 1
<View
@@ -258,7 +265,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findByA11yValue({ min: 1 })).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findByA11yValue({ min: 1 })).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with min value: 1
<View
@@ -270,7 +277,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findAllByA11yValue({ min: 1 })).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findAllByA11yValue({ min: 1 })).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with min value: 1
<View
@@ -285,28 +292,28 @@ test('error message renders the element tree, preserving only helpful props', as
describe('getByAccessibilityValue supports "aria-*" props', () => {
test('supports "aria-valuemax"', () => {
const screen = render(<View aria-valuemax={10} />);
render(<View aria-valuemax={10} />);
expect(screen.getByAccessibilityValue({ max: 10 })).toBeTruthy();
});
test('supports "aria-valuemin"', () => {
const screen = render(<View aria-valuemin={20} />);
render(<View aria-valuemin={20} />);
expect(screen.getByAccessibilityValue({ min: 20 })).toBeTruthy();
});
test('supports "aria-valuenow"', () => {
const screen = render(<View aria-valuenow={30} />);
render(<View aria-valuenow={30} />);
expect(screen.getByAccessibilityValue({ now: 30 })).toBeTruthy();
});
test('supports "aria-valuetext"', () => {
const screen = render(<View aria-valuetext="Hello World" />);
render(<View aria-valuetext="Hello World" />);
expect(screen.getByAccessibilityValue({ text: 'Hello World' })).toBeTruthy();
expect(screen.getByAccessibilityValue({ text: /hello/i })).toBeTruthy();
});
test('supports multiple "aria-value*" props', () => {
const screen = render(<View aria-valuenow={50} aria-valuemin={0} aria-valuemax={100} />);
render(<View aria-valuenow={50} aria-valuemin={0} aria-valuemax={100} />);
expect(screen.getByAccessibilityValue({ now: 50, min: 0, max: 100 })).toBeTruthy();
});
});
src/queries/__tests__/display-value.test.tsx
+38 -40
View File
@@ -1,7 +1,7 @@
import * as React from 'react';
import { TextInput, View } from 'react-native';
import { render } from '../..';
import { render, screen } from '../..';
const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -29,28 +29,28 @@ const Banana = () => (
);
test('getByDisplayValue, queryByDisplayValue', () => {
const { getByDisplayValue, queryByDisplayValue } = render(<Banana />);
const input = getByDisplayValue(/custom/i);
render(<Banana />);
const input = screen.getByDisplayValue(/custom/i);
expect(input.props.value).toBe(INPUT_FRESHNESS);
const sameInput = getByDisplayValue(INPUT_FRESHNESS);
const sameInput = screen.getByDisplayValue(INPUT_FRESHNESS);
expect(sameInput.props.value).toBe(INPUT_FRESHNESS);
expect(() => getByDisplayValue('no value')).toThrow(
expect(() => screen.getByDisplayValue('no value')).toThrow(
'Unable to find an element with displayValue: no value'
);
expect(queryByDisplayValue(/custom/i)).toBe(input);
expect(queryByDisplayValue('no value')).toBeNull();
expect(() => queryByDisplayValue(/fresh/i)).toThrow(
expect(screen.queryByDisplayValue(/custom/i)).toBe(input);
expect(screen.queryByDisplayValue('no value')).toBeNull();
expect(() => screen.queryByDisplayValue(/fresh/i)).toThrow(
'Found multiple elements with display value: /fresh/i'
);
});
test('getByDisplayValue, queryByDisplayValue get element by default value only when value is undefined', () => {
const { getByDisplayValue, queryByDisplayValue } = render(<Banana />);
expect(() => getByDisplayValue(DEFAULT_INPUT_CHEF)).toThrowErrorMatchingInlineSnapshot(`
render(<Banana />);
expect(() => screen.getByDisplayValue(DEFAULT_INPUT_CHEF)).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with displayValue: What did you inspect?
<View>
@@ -74,9 +74,9 @@ test('getByDisplayValue, queryByDisplayValue get element by default value only w
/>
</View>"
`);
expect(queryByDisplayValue(DEFAULT_INPUT_CHEF)).toBeNull();
expect(screen.queryByDisplayValue(DEFAULT_INPUT_CHEF)).toBeNull();
expect(() => getByDisplayValue('hello')).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByDisplayValue('hello')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with displayValue: hello
<View>
@@ -100,35 +100,35 @@ test('getByDisplayValue, queryByDisplayValue get element by default value only w
/>
</View>"
`);
expect(queryByDisplayValue('hello')).toBeNull();
expect(screen.queryByDisplayValue('hello')).toBeNull();
expect(getByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
expect(queryByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
expect(screen.getByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
expect(screen.queryByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
});
test('getAllByDisplayValue, queryAllByDisplayValue', () => {
const { getAllByDisplayValue, queryAllByDisplayValue } = render(<Banana />);
const inputs = getAllByDisplayValue(/fresh/i);
render(<Banana />);
const inputs = screen.getAllByDisplayValue(/fresh/i);
expect(inputs).toHaveLength(2);
expect(() => getAllByDisplayValue('no value')).toThrow(
expect(() => screen.getAllByDisplayValue('no value')).toThrow(
'Unable to find an element with displayValue: no value'
);
expect(queryAllByDisplayValue(/fresh/i)).toEqual(inputs);
expect(queryAllByDisplayValue('no value')).toHaveLength(0);
expect(screen.queryAllByDisplayValue(/fresh/i)).toEqual(inputs);
expect(screen.queryAllByDisplayValue('no value')).toHaveLength(0);
});
test('findBy queries work asynchronously', async () => {
const options = { timeout: 10 }; // Short timeout so that this test runs quickly
const { rerender, findByDisplayValue, findAllByDisplayValue } = render(<View />);
render(<View />);
await expect(findByDisplayValue('Display Value', {}, options)).rejects.toBeTruthy();
await expect(findAllByDisplayValue('Display Value', {}, options)).rejects.toBeTruthy();
await expect(screen.findByDisplayValue('Display Value', {}, options)).rejects.toBeTruthy();
await expect(screen.findAllByDisplayValue('Display Value', {}, options)).rejects.toBeTruthy();
setTimeout(
() =>
rerender(
screen.rerender(
<View>
<TextInput value="Display Value" />
</View>
@@ -136,20 +136,18 @@ test('findBy queries work asynchronously', async () => {
20
);
await expect(findByDisplayValue('Display Value')).resolves.toBeTruthy();
await expect(findAllByDisplayValue('Display Value')).resolves.toHaveLength(1);
await expect(screen.findByDisplayValue('Display Value')).resolves.toBeTruthy();
await expect(screen.findAllByDisplayValue('Display Value')).resolves.toHaveLength(1);
}, 20000);
test('byDisplayValue queries support hidden option', () => {
const { getByDisplayValue, queryByDisplayValue } = render(
<TextInput value="hidden" style={{ display: 'none' }} />
);
render(<TextInput value="hidden" style={{ display: 'none' }} />);
expect(getByDisplayValue('hidden', { includeHiddenElements: true })).toBeTruthy();
expect(screen.getByDisplayValue('hidden', { includeHiddenElements: true })).toBeTruthy();
expect(queryByDisplayValue('hidden')).toBeFalsy();
expect(queryByDisplayValue('hidden', { includeHiddenElements: false })).toBeFalsy();
expect(() => getByDisplayValue('hidden', { includeHiddenElements: false }))
expect(screen.queryByDisplayValue('hidden')).toBeFalsy();
expect(screen.queryByDisplayValue('hidden', { includeHiddenElements: false })).toBeFalsy();
expect(() => screen.getByDisplayValue('hidden', { includeHiddenElements: false }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with displayValue: hidden
@@ -165,15 +163,15 @@ test('byDisplayValue queries support hidden option', () => {
});
test('byDisplayValue should return host component', () => {
const { getByDisplayValue } = render(<TextInput value="value" />);
render(<TextInput value="value" />);
expect(getByDisplayValue('value').type).toBe('TextInput');
expect(screen.getByDisplayValue('value').type).toBe('TextInput');
});
test('error message renders the element tree, preserving only helpful props', async () => {
const view = render(<TextInput value="1" key="3" />);
render(<TextInput value="1" key="3" />);
expect(() => view.getByDisplayValue('2')).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByDisplayValue('2')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with displayValue: 2
<TextInput
@@ -181,7 +179,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
expect(() => view.getAllByDisplayValue('2')).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getAllByDisplayValue('2')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with displayValue: 2
<TextInput
@@ -189,7 +187,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findByDisplayValue('2')).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findByDisplayValue('2')).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with displayValue: 2
<TextInput
@@ -197,7 +195,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findAllByDisplayValue('2')).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findAllByDisplayValue('2')).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with displayValue: 2
<TextInput
src/queries/__tests__/hint-text.test.tsx
+40 -34
View File
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Pressable, Text, View } from 'react-native';
import { render } from '../..';
import { render, screen } from '../..';
const BUTTON_HINT = 'click this button';
const TEXT_HINT = 'static text';
@@ -33,80 +33,86 @@ const Section = () => (
);
test('getByA11yHint, queryByA11yHint, findByA11yHint', async () => {
const { getByA11yHint, queryByA11yHint, findByA11yHint } = render(<Section />);
render(<Section />);
expect(getByA11yHint(BUTTON_HINT).props.accessibilityHint).toEqual(BUTTON_HINT);
const button = queryByA11yHint(BUTTON_HINT);
expect(screen.getByA11yHint(BUTTON_HINT).props.accessibilityHint).toEqual(BUTTON_HINT);
const button = screen.queryByA11yHint(BUTTON_HINT);
expect(button?.props.accessibilityHint).toEqual(BUTTON_HINT);
expect(() => getByA11yHint(NO_MATCHES_TEXT)).toThrow(getNoInstancesFoundMessage(NO_MATCHES_TEXT));
expect(queryByA11yHint(NO_MATCHES_TEXT)).toBeNull();
expect(() => screen.getByA11yHint(NO_MATCHES_TEXT)).toThrow(
getNoInstancesFoundMessage(NO_MATCHES_TEXT)
);
expect(screen.queryByA11yHint(NO_MATCHES_TEXT)).toBeNull();
expect(() => getByA11yHint(TEXT_HINT)).toThrow(getMultipleInstancesFoundMessage(TEXT_HINT));
expect(() => queryByA11yHint(TEXT_HINT)).toThrow(getMultipleInstancesFoundMessage(TEXT_HINT));
expect(() => screen.getByA11yHint(TEXT_HINT)).toThrow(
getMultipleInstancesFoundMessage(TEXT_HINT)
);
expect(() => screen.queryByA11yHint(TEXT_HINT)).toThrow(
getMultipleInstancesFoundMessage(TEXT_HINT)
);
const asyncButton = await findByA11yHint(BUTTON_HINT);
const asyncButton = await screen.findByA11yHint(BUTTON_HINT);
expect(asyncButton.props.accessibilityHint).toEqual(BUTTON_HINT);
await expect(findByA11yHint(NO_MATCHES_TEXT)).rejects.toThrow(
await expect(screen.findByA11yHint(NO_MATCHES_TEXT)).rejects.toThrow(
getNoInstancesFoundMessage(NO_MATCHES_TEXT)
);
await expect(findByA11yHint(TEXT_HINT)).rejects.toThrow(
await expect(screen.findByA11yHint(TEXT_HINT)).rejects.toThrow(
getMultipleInstancesFoundMessage(TEXT_HINT)
);
});
test('getAllByA11yHint, queryAllByA11yHint, findAllByA11yHint', async () => {
const { getAllByA11yHint, queryAllByA11yHint, findAllByA11yHint } = render(<Section />);
render(<Section />);
expect(getAllByA11yHint(TEXT_HINT)).toHaveLength(2);
expect(queryAllByA11yHint(TEXT_HINT)).toHaveLength(2);
expect(screen.getAllByA11yHint(TEXT_HINT)).toHaveLength(2);
expect(screen.queryAllByA11yHint(TEXT_HINT)).toHaveLength(2);
expect(() => getAllByA11yHint(NO_MATCHES_TEXT)).toThrow(
expect(() => screen.getAllByA11yHint(NO_MATCHES_TEXT)).toThrow(
getNoInstancesFoundMessage(NO_MATCHES_TEXT)
);
expect(queryAllByA11yHint(NO_MATCHES_TEXT)).toEqual([]);
expect(screen.queryAllByA11yHint(NO_MATCHES_TEXT)).toEqual([]);
await expect(findAllByA11yHint(TEXT_HINT)).resolves.toHaveLength(2);
await expect(findAllByA11yHint(NO_MATCHES_TEXT)).rejects.toThrow(
await expect(screen.findAllByA11yHint(TEXT_HINT)).resolves.toHaveLength(2);
await expect(screen.findAllByA11yHint(NO_MATCHES_TEXT)).rejects.toThrow(
getNoInstancesFoundMessage(NO_MATCHES_TEXT)
);
});
test('getByHintText, getByHintText', () => {
const { getByHintText, getAllByHintText } = render(
render(
<View>
<View accessibilityHint="test" />
<View accessibilityHint="tests id" />
</View>
);
expect(getByHintText('id', { exact: false })).toBeTruthy();
expect(getAllByHintText('test', { exact: false })).toHaveLength(2);
expect(screen.getByHintText('id', { exact: false })).toBeTruthy();
expect(screen.getAllByHintText('test', { exact: false })).toHaveLength(2);
});
test('getByHintText, getByHintText and exact = true', () => {
const { queryByHintText, getAllByHintText } = render(
render(
<View>
<View accessibilityHint="test" />
<View accessibilityHint="tests id" />
</View>
);
expect(queryByHintText('id', { exact: true })).toBeNull();
expect(getAllByHintText('test', { exact: true })).toHaveLength(1);
expect(screen.queryByHintText('id', { exact: true })).toBeNull();
expect(screen.getAllByHintText('test', { exact: true })).toHaveLength(1);
});
test('byHintText queries support hidden option', () => {
const { getByHintText, queryByHintText } = render(
render(
<Text accessibilityHint="hidden" style={{ display: 'none' }}>
Hidden from accessiblity
</Text>
);
expect(getByHintText('hidden', { includeHiddenElements: true })).toBeTruthy();
expect(screen.getByHintText('hidden', { includeHiddenElements: true })).toBeTruthy();
expect(queryByHintText('hidden')).toBeFalsy();
expect(queryByHintText('hidden', { includeHiddenElements: false })).toBeFalsy();
expect(() => getByHintText('hidden', { includeHiddenElements: false }))
expect(screen.queryByHintText('hidden')).toBeFalsy();
expect(screen.queryByHintText('hidden', { includeHiddenElements: false })).toBeFalsy();
expect(() => screen.getByHintText('hidden', { includeHiddenElements: false }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with accessibilityHint: hidden
@@ -124,9 +130,9 @@ test('byHintText queries support hidden option', () => {
});
test('error message renders the element tree, preserving only helpful props', async () => {
const view = render(<Pressable accessibilityHint="HINT" key="3" />);
render(<Pressable accessibilityHint="HINT" key="3" />);
expect(() => view.getByHintText('FOO')).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByHintText('FOO')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with accessibilityHint: FOO
<View
@@ -135,7 +141,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
expect(() => view.getAllByHintText('FOO')).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getAllByHintText('FOO')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with accessibilityHint: FOO
<View
@@ -144,7 +150,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findByHintText('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findByHintText('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with accessibilityHint: FOO
<View
@@ -153,7 +159,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findAllByHintText('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findAllByHintText('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with accessibilityHint: FOO
<View
src/queries/__tests__/label-text.test.tsx
+52 -48
View File
@@ -1,6 +1,6 @@
import * as React from 'react';
import { View, Text, TextInput, Pressable } from 'react-native';
import { render } from '../..';
import { render, screen } from '../..';
const BUTTON_LABEL = 'cool button';
const BUTTON_HINT = 'click this button';
@@ -39,61 +39,65 @@ const Section = () => (
);
test('getByLabelText, queryByLabelText, findByLabelText', async () => {
const { getByLabelText, queryByLabelText, findByLabelText } = render(<Section />);
render(<Section />);
expect(getByLabelText(BUTTON_LABEL).props.accessibilityLabel).toEqual(BUTTON_LABEL);
const button = queryByLabelText(/button/g);
expect(screen.getByLabelText(BUTTON_LABEL).props.accessibilityLabel).toEqual(BUTTON_LABEL);
const button = screen.queryByLabelText(/button/g);
expect(button?.props.accessibilityLabel).toEqual(BUTTON_LABEL);
expect(() => getByLabelText(NO_MATCHES_TEXT)).toThrow(
expect(() => screen.getByLabelText(NO_MATCHES_TEXT)).toThrow(
getNoInstancesFoundMessage(NO_MATCHES_TEXT)
);
expect(queryByLabelText(NO_MATCHES_TEXT)).toBeNull();
expect(screen.queryByLabelText(NO_MATCHES_TEXT)).toBeNull();
expect(() => getByLabelText(TEXT_LABEL)).toThrow(getMultipleInstancesFoundMessage(TEXT_LABEL));
expect(() => queryByLabelText(TEXT_LABEL)).toThrow(getMultipleInstancesFoundMessage(TEXT_LABEL));
expect(() => screen.getByLabelText(TEXT_LABEL)).toThrow(
getMultipleInstancesFoundMessage(TEXT_LABEL)
);
expect(() => screen.queryByLabelText(TEXT_LABEL)).toThrow(
getMultipleInstancesFoundMessage(TEXT_LABEL)
);
const asyncButton = await findByLabelText(BUTTON_LABEL);
const asyncButton = await screen.findByLabelText(BUTTON_LABEL);
expect(asyncButton.props.accessibilityLabel).toEqual(BUTTON_LABEL);
await expect(findByLabelText(NO_MATCHES_TEXT)).rejects.toThrow(
await expect(screen.findByLabelText(NO_MATCHES_TEXT)).rejects.toThrow(
getNoInstancesFoundMessage(NO_MATCHES_TEXT)
);
await expect(findByLabelText(TEXT_LABEL)).rejects.toThrow(
await expect(screen.findByLabelText(TEXT_LABEL)).rejects.toThrow(
getMultipleInstancesFoundMessage(TEXT_LABEL)
);
});
test('getAllByLabelText, queryAllByLabelText, findAllByLabelText', async () => {
const { getAllByLabelText, queryAllByLabelText, findAllByLabelText } = render(<Section />);
render(<Section />);
expect(getAllByLabelText(TEXT_LABEL)).toHaveLength(2);
expect(queryAllByLabelText(/cool/g)).toHaveLength(3);
expect(screen.getAllByLabelText(TEXT_LABEL)).toHaveLength(2);
expect(screen.queryAllByLabelText(/cool/g)).toHaveLength(3);
expect(() => getAllByLabelText(NO_MATCHES_TEXT)).toThrow(
expect(() => screen.getAllByLabelText(NO_MATCHES_TEXT)).toThrow(
getNoInstancesFoundMessage(NO_MATCHES_TEXT)
);
expect(queryAllByLabelText(NO_MATCHES_TEXT)).toEqual([]);
expect(screen.queryAllByLabelText(NO_MATCHES_TEXT)).toEqual([]);
await expect(findAllByLabelText(TEXT_LABEL)).resolves.toHaveLength(2);
await expect(findAllByLabelText(NO_MATCHES_TEXT)).rejects.toThrow(
await expect(screen.findAllByLabelText(TEXT_LABEL)).resolves.toHaveLength(2);
await expect(screen.findAllByLabelText(NO_MATCHES_TEXT)).rejects.toThrow(
getNoInstancesFoundMessage(NO_MATCHES_TEXT)
);
});
test('getAllByLabelText, queryAllByLabelText, findAllByLabelText with exact as false', async () => {
const { getAllByLabelText, queryAllByLabelText, findAllByLabelText } = render(<Section />);
render(<Section />);
expect(getAllByLabelText(TEXT_LABEL, { exact: false })).toHaveLength(2);
expect(queryAllByLabelText(/cool/g, { exact: false })).toHaveLength(3);
expect(screen.getAllByLabelText(TEXT_LABEL, { exact: false })).toHaveLength(2);
expect(screen.queryAllByLabelText(/cool/g, { exact: false })).toHaveLength(3);
expect(() => getAllByLabelText(NO_MATCHES_TEXT, { exact: false })).toThrow(
expect(() => screen.getAllByLabelText(NO_MATCHES_TEXT, { exact: false })).toThrow(
getNoInstancesFoundMessage(NO_MATCHES_TEXT)
);
expect(queryAllByLabelText(NO_MATCHES_TEXT, { exact: false })).toEqual([]);
expect(screen.queryAllByLabelText(NO_MATCHES_TEXT, { exact: false })).toEqual([]);
await expect(findAllByLabelText(TEXT_LABEL, { exact: false })).resolves.toHaveLength(2);
await expect(findAllByLabelText(NO_MATCHES_TEXT, { exact: false })).rejects.toThrow(
await expect(screen.findAllByLabelText(TEXT_LABEL, { exact: false })).resolves.toHaveLength(2);
await expect(screen.findAllByLabelText(NO_MATCHES_TEXT, { exact: false })).rejects.toThrow(
getNoInstancesFoundMessage(NO_MATCHES_TEXT)
);
});
@@ -110,28 +114,28 @@ describe('findBy options deprecations', () => {
test('findByText queries warn on deprecated use of WaitForOptions', async () => {
const options = { timeout: 10 };
// mock implementation to avoid warning in the test suite
const view = render(<View />);
await expect(view.findByLabelText('Some Text', options)).rejects.toBeTruthy();
render(<View />);
await expect(screen.findByLabelText('Some Text', options)).rejects.toBeTruthy();
setTimeout(() => view.rerender(<View accessibilityLabel="Some Text" />), 20);
await expect(view.findByLabelText('Some Text')).resolves.toBeTruthy();
setTimeout(() => screen.rerender(<View accessibilityLabel="Some Text" />), 20);
await expect(screen.findByLabelText('Some Text')).resolves.toBeTruthy();
expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('Use of option "timeout"'));
}, 20000);
});
test('byLabelText queries support hidden option', () => {
const { getByLabelText, queryByLabelText } = render(
render(
<Text accessibilityLabel="hidden" style={{ display: 'none' }}>
Hidden from accessibility
</Text>
);
expect(getByLabelText('hidden', { includeHiddenElements: true })).toBeTruthy();
expect(screen.getByLabelText('hidden', { includeHiddenElements: true })).toBeTruthy();
expect(queryByLabelText('hidden')).toBeFalsy();
expect(queryByLabelText('hidden', { includeHiddenElements: false })).toBeFalsy();
expect(() => getByLabelText('hidden', { includeHiddenElements: false }))
expect(screen.queryByLabelText('hidden')).toBeFalsy();
expect(screen.queryByLabelText('hidden', { includeHiddenElements: false })).toBeFalsy();
expect(() => screen.getByLabelText('hidden', { includeHiddenElements: false }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with accessibility label: hidden
@@ -149,7 +153,7 @@ test('byLabelText queries support hidden option', () => {
});
test('getByLabelText supports aria-label', () => {
const screen = render(
render(
<>
<View testID="view" aria-label="view-label" />
<Text testID="text" aria-label="text-label">
@@ -165,19 +169,19 @@ test('getByLabelText supports aria-label', () => {
});
test('getByLabelText supports accessibilityLabelledBy', () => {
const { getByLabelText, getByTestId } = render(
render(
<>
<Text nativeID="label">Label for input</Text>
<TextInput testID="textInput" accessibilityLabelledBy="label" />
</>
);
expect(getByLabelText('Label for input')).toBe(getByTestId('textInput'));
expect(getByLabelText(/input/)).toBe(getByTestId('textInput'));
expect(screen.getByLabelText('Label for input')).toBe(screen.getByTestId('textInput'));
expect(screen.getByLabelText(/input/)).toBe(screen.getByTestId('textInput'));
});
test('getByLabelText supports nested accessibilityLabelledBy', () => {
const { getByLabelText, getByTestId } = render(
render(
<>
<View nativeID="label">
<Text>Label for input</Text>
@@ -186,12 +190,12 @@ test('getByLabelText supports nested accessibilityLabelledBy', () => {
</>
);
expect(getByLabelText('Label for input')).toBe(getByTestId('textInput'));
expect(getByLabelText(/input/)).toBe(getByTestId('textInput'));
expect(screen.getByLabelText('Label for input')).toBe(screen.getByTestId('textInput'));
expect(screen.getByLabelText(/input/)).toBe(screen.getByTestId('textInput'));
});
test('getByLabelText supports aria-labelledby', () => {
const screen = render(
render(
<>
<Text nativeID="label">Text Label</Text>
<TextInput testID="text-input" aria-labelledby="label" />
@@ -203,7 +207,7 @@ test('getByLabelText supports aria-labelledby', () => {
});
test('getByLabelText supports nested aria-labelledby', () => {
const screen = render(
render(
<>
<View nativeID="label">
<Text>Nested Text Label</Text>
@@ -217,9 +221,9 @@ test('getByLabelText supports nested aria-labelledby', () => {
});
test('error message renders the element tree, preserving only helpful props', async () => {
const view = render(<Pressable accessibilityLabel="LABEL" key="3" />);
render(<Pressable accessibilityLabel="LABEL" key="3" />);
expect(() => view.getByLabelText('FOO')).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByLabelText('FOO')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with accessibility label: FOO
<View
@@ -228,7 +232,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
expect(() => view.getAllByLabelText('FOO')).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getAllByLabelText('FOO')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with accessibility label: FOO
<View
@@ -237,7 +241,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findByLabelText('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findByLabelText('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with accessibility label: FOO
<View
@@ -246,7 +250,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findAllByLabelText('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findAllByLabelText('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with accessibility label: FOO
<View
src/queries/__tests__/make-queries.test.tsx
+23 -23
View File
@@ -4,9 +4,9 @@ import { render, screen } from '../..';
describe('printing element tree', () => {
test('includes element tree on error with less-helpful props stripped', () => {
const { getByText } = render(<Text onPress={() => null}>Some text</Text>);
render(<Text onPress={() => null}>Some text</Text>);
expect(() => getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with text: /foo/
<Text>
@@ -16,7 +16,7 @@ describe('printing element tree', () => {
});
test('prints helpful props but not others', () => {
const { getByText } = render(
render(
<View
key="this is filtered"
testID="TEST_ID"
@@ -48,7 +48,7 @@ describe('printing element tree', () => {
</View>
);
expect(() => getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with text: /foo/
<View
@@ -89,9 +89,9 @@ describe('printing element tree', () => {
});
test('prints tree and filters props with getBy, getAllBy, findBy, findAllBy', async () => {
const view = render(<View accessibilityViewIsModal key="this is filtered" />);
render(<View accessibilityViewIsModal key="this is filtered" />);
expect(() => view.getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with text: /foo/
<View
@@ -99,7 +99,7 @@ describe('printing element tree', () => {
/>"
`);
expect(() => view.getAllByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getAllByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with text: /foo/
<View
@@ -107,7 +107,7 @@ describe('printing element tree', () => {
/>"
`);
await expect(view.findByText(/foo/)).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findByText(/foo/)).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with text: /foo/
<View
@@ -115,7 +115,7 @@ describe('printing element tree', () => {
/>"
`);
await expect(view.findAllByText(/foo/)).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findAllByText(/foo/)).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with text: /foo/
<View
@@ -125,22 +125,22 @@ describe('printing element tree', () => {
});
test('only appends element tree on last failure with findBy', async () => {
const { findByText } = render(<View accessibilityViewIsModal key="this is filtered" />);
render(<View accessibilityViewIsModal key="this is filtered" />);
jest.spyOn(screen, 'toJSON');
await expect(findByText(/foo/)).rejects.toThrow();
await expect(screen.findByText(/foo/)).rejects.toThrow();
expect(screen.toJSON).toHaveBeenCalledTimes(1);
});
test('onTimeout with findBy receives error without element tree', async () => {
const { findByText } = render(<View />);
render(<View />);
const onTimeout = jest.fn((_: Error) => new Error('Replacement error'));
await expect(() =>
findByText(/foo/, undefined, { onTimeout })
screen.findByText(/foo/, undefined, { onTimeout })
).rejects.toThrowErrorMatchingInlineSnapshot(`"Replacement error"`);
expect(onTimeout).toHaveBeenCalledTimes(1);
@@ -151,12 +151,12 @@ describe('printing element tree', () => {
});
test('onTimeout with findAllBy receives error without element tree', async () => {
const { findAllByText } = render(<View />);
render(<View />);
const onTimeout = jest.fn((_: Error) => new Error('Replacement error'));
await expect(() =>
findAllByText(/foo/, undefined, { onTimeout })
screen.findAllByText(/foo/, undefined, { onTimeout })
).rejects.toThrowErrorMatchingInlineSnapshot(`"Replacement error"`);
expect(onTimeout).toHaveBeenCalledTimes(1);
@@ -167,7 +167,7 @@ describe('printing element tree', () => {
});
test('does not strip display: none from "style" prop, but does strip other styles', () => {
const { getByText } = render(
render(
<View style={{ display: 'flex', position: 'absolute' }}>
<Text
style={[
@@ -180,7 +180,7 @@ describe('printing element tree', () => {
</View>
);
expect(() => getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with text: /foo/
<View>
@@ -198,13 +198,13 @@ describe('printing element tree', () => {
});
test('strips undefined values from accessibilityState', () => {
const { getByText } = render(
render(
<View accessibilityState={{ checked: true, busy: false }}>
<View accessibilityState={{ checked: undefined }} />
</View>
);
expect(() => getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with text: /foo/
<View
@@ -221,13 +221,13 @@ describe('printing element tree', () => {
});
test('strips undefined values from accessibilityValue', () => {
const { getByText } = render(
render(
<View accessibilityValue={{ min: 1 }}>
<View accessibilityState={{}} />
</View>
);
expect(() => getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with text: /foo/
<View
@@ -243,10 +243,10 @@ describe('printing element tree', () => {
});
test('does not render element tree when toJSON() returns null', () => {
const view = render(<View />);
render(<View />);
jest.spyOn(screen, 'toJSON').mockImplementation(() => null);
expect(() => view.getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(
expect(() => screen.getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(
`"Unable to find an element with text: /foo/"`
);
});
src/queries/__tests__/placeholder-text.test.tsx
+26 -28
View File
@@ -1,6 +1,6 @@
import * as React from 'react';
import { View, TextInput } from 'react-native';
import { render } from '../..';
import { TextInput, View } from 'react-native';
import { render, screen } from '../..';
const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -25,48 +25,46 @@ const Banana = () => (
);
test('getByPlaceholderText, queryByPlaceholderText', () => {
const { getByPlaceholderText, queryByPlaceholderText } = render(<Banana />);
const input = getByPlaceholderText(/custom/i);
render(<Banana />);
const input = screen.getByPlaceholderText(/custom/i);
expect(input.props.placeholder).toBe(PLACEHOLDER_FRESHNESS);
const sameInput = getByPlaceholderText(PLACEHOLDER_FRESHNESS);
const sameInput = screen.getByPlaceholderText(PLACEHOLDER_FRESHNESS);
expect(sameInput.props.placeholder).toBe(PLACEHOLDER_FRESHNESS);
expect(() => getByPlaceholderText('no placeholder')).toThrow(
expect(() => screen.getByPlaceholderText('no placeholder')).toThrow(
'Unable to find an element with placeholder: no placeholder'
);
expect(queryByPlaceholderText(/add/i)).toBe(input);
expect(queryByPlaceholderText('no placeholder')).toBeNull();
expect(() => queryByPlaceholderText(/fresh/)).toThrow(
expect(screen.queryByPlaceholderText(/add/i)).toBe(input);
expect(screen.queryByPlaceholderText('no placeholder')).toBeNull();
expect(() => screen.queryByPlaceholderText(/fresh/)).toThrow(
'Found multiple elements with placeholder: /fresh/ '
);
});
test('getAllByPlaceholderText, queryAllByPlaceholderText', () => {
const { getAllByPlaceholderText, queryAllByPlaceholderText } = render(<Banana />);
const inputs = getAllByPlaceholderText(/fresh/i);
render(<Banana />);
const inputs = screen.getAllByPlaceholderText(/fresh/i);
expect(inputs).toHaveLength(2);
expect(() => getAllByPlaceholderText('no placeholder')).toThrow(
expect(() => screen.getAllByPlaceholderText('no placeholder')).toThrow(
'Unable to find an element with placeholder: no placeholder'
);
expect(queryAllByPlaceholderText(/fresh/i)).toEqual(inputs);
expect(queryAllByPlaceholderText('no placeholder')).toHaveLength(0);
expect(screen.queryAllByPlaceholderText(/fresh/i)).toEqual(inputs);
expect(screen.queryAllByPlaceholderText('no placeholder')).toHaveLength(0);
});
test('byPlaceholderText queries support hidden option', () => {
const { getByPlaceholderText, queryByPlaceholderText } = render(
<TextInput placeholder="hidden" style={{ display: 'none' }} />
);
render(<TextInput placeholder="hidden" style={{ display: 'none' }} />);
expect(getByPlaceholderText('hidden', { includeHiddenElements: true })).toBeTruthy();
expect(screen.getByPlaceholderText('hidden', { includeHiddenElements: true })).toBeTruthy();
expect(queryByPlaceholderText('hidden')).toBeFalsy();
expect(queryByPlaceholderText('hidden', { includeHiddenElements: false })).toBeFalsy();
expect(() => getByPlaceholderText('hidden', { includeHiddenElements: false }))
expect(screen.queryByPlaceholderText('hidden')).toBeFalsy();
expect(screen.queryByPlaceholderText('hidden', { includeHiddenElements: false })).toBeFalsy();
expect(() => screen.getByPlaceholderText('hidden', { includeHiddenElements: false }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with placeholder: hidden
@@ -82,15 +80,15 @@ test('byPlaceholderText queries support hidden option', () => {
});
test('byPlaceHolderText should return host component', () => {
const { getByPlaceholderText } = render(<TextInput placeholder="placeholder" />);
render(<TextInput placeholder="placeholder" />);
expect(getByPlaceholderText('placeholder').type).toBe('TextInput');
expect(screen.getByPlaceholderText('placeholder').type).toBe('TextInput');
});
test('error message renders the element tree, preserving only helpful props', async () => {
const view = render(<TextInput placeholder="PLACEHOLDER" key="3" />);
render(<TextInput placeholder="PLACEHOLDER" key="3" />);
expect(() => view.getByPlaceholderText('FOO')).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByPlaceholderText('FOO')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with placeholder: FOO
<TextInput
@@ -98,7 +96,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
expect(() => view.getAllByPlaceholderText('FOO')).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getAllByPlaceholderText('FOO')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with placeholder: FOO
<TextInput
@@ -106,7 +104,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findByPlaceholderText('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findByPlaceholderText('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with placeholder: FOO
<TextInput
@@ -114,7 +112,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findAllByPlaceholderText('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findAllByPlaceholderText('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with placeholder: FOO
<TextInput
src/queries/__tests__/role-value.test.tsx
+31 -31
View File
@@ -1,10 +1,10 @@
import * as React from 'react';
import { View, Text } from 'react-native';
import { render } from '../..';
import { Text, View } from 'react-native';
import { render, screen } from '../..';
describe('accessibility value', () => {
test('matches using all value props', () => {
const { getByRole, queryByRole } = render(
render(
<View
accessible
accessibilityRole="adjustable"
@@ -13,34 +13,34 @@ describe('accessibility value', () => {
);
expect(
getByRole('adjustable', {
screen.getByRole('adjustable', {
value: { min: 0, max: 100, now: 50, text: '50%' },
})
).toBeTruthy();
expect(
queryByRole('adjustable', {
screen.queryByRole('adjustable', {
value: { min: 1, max: 100, now: 50, text: '50%' },
})
).toBeFalsy();
expect(
queryByRole('adjustable', {
screen.queryByRole('adjustable', {
value: { min: 0, max: 99, now: 50, text: '50%' },
})
).toBeFalsy();
expect(
queryByRole('adjustable', {
screen.queryByRole('adjustable', {
value: { min: 0, max: 100, now: 45, text: '50%' },
})
).toBeFalsy();
expect(
queryByRole('adjustable', {
screen.queryByRole('adjustable', {
value: { min: 0, max: 100, now: 50, text: '55%' },
})
).toBeFalsy();
});
test('matches using single value', () => {
const { getByRole, queryByRole } = render(
render(
<View
accessible
accessibilityRole="adjustable"
@@ -48,21 +48,21 @@ describe('accessibility value', () => {
/>
);
expect(getByRole('adjustable', { value: { min: 10 } })).toBeTruthy();
expect(getByRole('adjustable', { value: { max: 20 } })).toBeTruthy();
expect(getByRole('adjustable', { value: { now: 12 } })).toBeTruthy();
expect(getByRole('adjustable', { value: { text: 'Hello' } })).toBeTruthy();
expect(getByRole('adjustable', { value: { text: /hello/i } })).toBeTruthy();
expect(screen.getByRole('adjustable', { value: { min: 10 } })).toBeTruthy();
expect(screen.getByRole('adjustable', { value: { max: 20 } })).toBeTruthy();
expect(screen.getByRole('adjustable', { value: { now: 12 } })).toBeTruthy();
expect(screen.getByRole('adjustable', { value: { text: 'Hello' } })).toBeTruthy();
expect(screen.getByRole('adjustable', { value: { text: /hello/i } })).toBeTruthy();
expect(queryByRole('adjustable', { value: { min: 11 } })).toBeFalsy();
expect(queryByRole('adjustable', { value: { max: 19 } })).toBeFalsy();
expect(queryByRole('adjustable', { value: { now: 15 } })).toBeFalsy();
expect(queryByRole('adjustable', { value: { text: 'No' } })).toBeFalsy();
expect(queryByRole('adjustable', { value: { text: /no/ } })).toBeFalsy();
expect(screen.queryByRole('adjustable', { value: { min: 11 } })).toBeFalsy();
expect(screen.queryByRole('adjustable', { value: { max: 19 } })).toBeFalsy();
expect(screen.queryByRole('adjustable', { value: { now: 15 } })).toBeFalsy();
expect(screen.queryByRole('adjustable', { value: { text: 'No' } })).toBeFalsy();
expect(screen.queryByRole('adjustable', { value: { text: /no/ } })).toBeFalsy();
});
test('matches using single value and other options', () => {
const { getByRole } = render(
render(
<Text
accessibilityRole="adjustable"
accessibilityState={{ disabled: true }}
@@ -72,10 +72,10 @@ describe('accessibility value', () => {
</Text>
);
expect(getByRole('adjustable', { name: 'Hello', value: { min: 10 } })).toBeTruthy();
expect(getByRole('adjustable', { disabled: true, value: { min: 10 } })).toBeTruthy();
expect(screen.getByRole('adjustable', { name: 'Hello', value: { min: 10 } })).toBeTruthy();
expect(screen.getByRole('adjustable', { disabled: true, value: { min: 10 } })).toBeTruthy();
expect(() => getByRole('adjustable', { name: 'Hello', value: { min: 5 } }))
expect(() => screen.getByRole('adjustable', { name: 'Hello', value: { min: 5 } }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "adjustable", name: "Hello", min value: 5
@@ -98,7 +98,7 @@ describe('accessibility value', () => {
Hello
</Text>"
`);
expect(() => getByRole('adjustable', { name: 'World', value: { min: 10 } }))
expect(() => screen.getByRole('adjustable', { name: 'World', value: { min: 10 } }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "adjustable", name: "World", min value: 10
@@ -121,7 +121,7 @@ describe('accessibility value', () => {
Hello
</Text>"
`);
expect(() => getByRole('adjustable', { name: 'Hello', value: { min: 5 } }))
expect(() => screen.getByRole('adjustable', { name: 'Hello', value: { min: 5 } }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "adjustable", name: "Hello", min value: 5
@@ -144,7 +144,7 @@ describe('accessibility value', () => {
Hello
</Text>"
`);
expect(() => getByRole('adjustable', { selected: true, value: { min: 10 } }))
expect(() => screen.getByRole('adjustable', { selected: true, value: { min: 10 } }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "adjustable", selected state: true, min value: 10
@@ -170,25 +170,25 @@ describe('accessibility value', () => {
});
test('supports "aria-valuemax" prop', () => {
const screen = render(<View accessible role="slider" aria-valuemax={10} />);
render(<View accessible role="slider" aria-valuemax={10} />);
expect(screen.getByRole('slider', { value: { max: 10 } })).toBeTruthy();
expect(screen.queryByRole('slider', { value: { max: 20 } })).toBeNull();
});
test('supports "aria-valuemin" prop', () => {
const screen = render(<View accessible role="slider" aria-valuemin={20} />);
render(<View accessible role="slider" aria-valuemin={20} />);
expect(screen.getByRole('slider', { value: { min: 20 } })).toBeTruthy();
expect(screen.queryByRole('slider', { value: { min: 30 } })).toBeNull();
});
test('supports "aria-valuenow" prop', () => {
const screen = render(<View accessible role="slider" aria-valuenow={30} />);
render(<View accessible role="slider" aria-valuenow={30} />);
expect(screen.getByRole('slider', { value: { now: 30 } })).toBeTruthy();
expect(screen.queryByRole('slider', { value: { now: 10 } })).toBeNull();
});
test('supports "aria-valuetext" prop', () => {
const screen = render(<View accessible role="slider" aria-valuetext="Hello World" />);
render(<View accessible role="slider" aria-valuetext="Hello World" />);
expect(screen.getByRole('slider', { value: { text: 'Hello World' } })).toBeTruthy();
expect(screen.getByRole('slider', { value: { text: /hello/i } })).toBeTruthy();
expect(screen.queryByRole('slider', { value: { text: 'Hello' } })).toBeNull();
@@ -196,7 +196,7 @@ describe('accessibility value', () => {
});
test('supports multiple "aria-value*" props', () => {
const screen = render(
render(
<View accessible role="slider" aria-valuenow={50} aria-valuemin={0} aria-valuemax={100} />
);
expect(screen.getByRole('slider', { value: { now: 50, min: 0, max: 100 } })).toBeTruthy();
src/queries/__tests__/role.test.tsx
+199 -193
View File
@@ -1,14 +1,14 @@
import * as React from 'react';
import {
TouchableOpacity,
TouchableWithoutFeedback,
Button as RNButton,
Pressable,
Text,
TextInput,
TouchableOpacity,
TouchableWithoutFeedback,
View,
Pressable,
Button as RNButton,
} from 'react-native';
import { render } from '../..';
import { render, screen } from '../..';
const TEXT_LABEL = 'cool text';
@@ -41,44 +41,48 @@ const Section = () => (
);
test('getByRole, queryByRole, findByRole', async () => {
const { getByRole, queryByRole, findByRole } = render(<Section />);
render(<Section />);
expect(getByRole('button').props.accessibilityRole).toEqual('button');
const button = queryByRole(/button/g);
expect(screen.getByRole('button').props.accessibilityRole).toEqual('button');
const button = screen.queryByRole(/button/g);
expect(button?.props.accessibilityRole).toEqual('button');
expect(() => getByRole(NO_MATCHES_TEXT)).toThrow(getNoInstancesFoundMessage(NO_MATCHES_TEXT));
expect(queryByRole(NO_MATCHES_TEXT)).toBeNull();
expect(() => getByRole('link')).toThrow(getMultipleInstancesFoundMessage('link'));
expect(() => queryByRole('link')).toThrow(getMultipleInstancesFoundMessage('link'));
const asyncButton = await findByRole('button');
expect(asyncButton.props.accessibilityRole).toEqual('button');
await expect(findByRole(NO_MATCHES_TEXT)).rejects.toThrow(
expect(() => screen.getByRole(NO_MATCHES_TEXT)).toThrow(
getNoInstancesFoundMessage(NO_MATCHES_TEXT)
);
await expect(findByRole('link')).rejects.toThrow(getMultipleInstancesFoundMessage('link'));
expect(screen.queryByRole(NO_MATCHES_TEXT)).toBeNull();
expect(() => screen.getByRole('link')).toThrow(getMultipleInstancesFoundMessage('link'));
expect(() => screen.queryByRole('link')).toThrow(getMultipleInstancesFoundMessage('link'));
const asyncButton = await screen.findByRole('button');
expect(asyncButton.props.accessibilityRole).toEqual('button');
await expect(screen.findByRole(NO_MATCHES_TEXT)).rejects.toThrow(
getNoInstancesFoundMessage(NO_MATCHES_TEXT)
);
await expect(screen.findByRole('link')).rejects.toThrow(getMultipleInstancesFoundMessage('link'));
});
test('getAllByRole, queryAllByRole, findAllByRole', async () => {
const { getAllByRole, queryAllByRole, findAllByRole } = render(<Section />);
render(<Section />);
expect(getAllByRole('link')).toHaveLength(2);
expect(queryAllByRole(/ink/g)).toHaveLength(2);
expect(screen.getAllByRole('link')).toHaveLength(2);
expect(screen.queryAllByRole(/ink/g)).toHaveLength(2);
expect(() => getAllByRole(NO_MATCHES_TEXT)).toThrow(getNoInstancesFoundMessage(NO_MATCHES_TEXT));
expect(queryAllByRole(NO_MATCHES_TEXT)).toEqual([]);
expect(() => screen.getAllByRole(NO_MATCHES_TEXT)).toThrow(
getNoInstancesFoundMessage(NO_MATCHES_TEXT)
);
expect(screen.queryAllByRole(NO_MATCHES_TEXT)).toEqual([]);
await expect(findAllByRole('link')).resolves.toHaveLength(2);
await expect(findAllByRole(NO_MATCHES_TEXT)).rejects.toThrow(
await expect(screen.findAllByRole('link')).resolves.toHaveLength(2);
await expect(screen.findAllByRole(NO_MATCHES_TEXT)).rejects.toThrow(
getNoInstancesFoundMessage(NO_MATCHES_TEXT)
);
});
test('supports role prop', () => {
const screen = render(
render(
<>
<View accessible role="checkbox" />
<View accessible role="radio" />
@@ -102,34 +106,34 @@ test('supports role prop', () => {
});
test('supports default View component "none" role', () => {
const screen = render(<View testID="view" accessible />);
render(<View testID="view" accessible />);
expect(screen.getByRole('none').props.testID).toBe('view');
});
test('supports default Text component "text" role', () => {
const screen = render(<Text testID="text" />);
render(<Text testID="text" />);
expect(screen.getByRole('text').props.testID).toBe('text');
});
test('supports default TextInput component "none" role', () => {
const screen = render(<TextInput testID="text-input" />);
render(<TextInput testID="text-input" />);
expect(screen.getByRole('none').props.testID).toBe('text-input');
});
describe('supports name option', () => {
test('returns an element that has the corresponding role and a children with the name', () => {
const { getByRole } = render(
render(
<TouchableOpacity accessibilityRole="button" testID="target-button">
<Text>Save</Text>
</TouchableOpacity>
);
// assert on the testId to be sure that the returned element is the one with the accessibilityRole
expect(getByRole('button', { name: 'Save' }).props.testID).toBe('target-button');
expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('target-button');
});
test('returns an element that has the corresponding role when several children include the name', () => {
const { getByRole } = render(
render(
<TouchableOpacity accessibilityRole="button" testID="target-button">
<Text>Save</Text>
<Text>Save</Text>
@@ -137,22 +141,22 @@ describe('supports name option', () => {
);
// assert on the testId to be sure that the returned element is the one with the accessibilityRole
expect(getByRole('button', { name: 'Save' }).props.testID).toBe('target-button');
expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('target-button');
});
test('returns an element that has the corresponding role and a children with a matching accessibilityLabel', () => {
const { getByRole } = render(
render(
<TouchableOpacity accessibilityRole="button" testID="target-button">
<Text accessibilityLabel="Save" />
</TouchableOpacity>
);
// assert on the testId to be sure that the returned element is the one with the accessibilityRole
expect(getByRole('button', { name: 'Save' }).props.testID).toBe('target-button');
expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('target-button');
});
test('returns an element that has the corresponding role and a matching accessibilityLabel', () => {
const { getByRole } = render(
render(
<TouchableOpacity
accessibilityRole="button"
testID="target-button"
@@ -161,22 +165,22 @@ describe('supports name option', () => {
);
// assert on the testId to be sure that the returned element is the one with the accessibilityRole
expect(getByRole('button', { name: 'Save' }).props.testID).toBe('target-button');
expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('target-button');
});
test('returns an element that has the corresponding role and a children with a matching aria-label', () => {
const { getByRole } = render(
render(
<TouchableOpacity accessibilityRole="button" testID="target-button">
<Text aria-label="Save" />
</TouchableOpacity>
);
// assert on the testId to be sure that the returned element is the one with the accessibilityRole
expect(getByRole('button', { name: 'Save' }).props.testID).toBe('target-button');
expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('target-button');
});
test('returns an element that has the corresponding role and a matching aria-label', () => {
const { getByRole } = render(
render(
<TouchableOpacity
accessibilityRole="button"
testID="target-button"
@@ -185,57 +189,55 @@ describe('supports name option', () => {
);
// assert on the testId to be sure that the returned element is the one with the accessibilityRole
expect(getByRole('button', { name: 'Save' }).props.testID).toBe('target-button');
expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('target-button');
});
test('returns an element when the direct child is text', () => {
const { getByRole, getByTestId } = render(
render(
<Text accessibilityRole="header" testID="target-header">
About
</Text>
);
// assert on the testId to be sure that the returned element is the one with the accessibilityRole
expect(getByRole('header', { name: 'About' })).toBe(getByTestId('target-header'));
expect(getByRole('header', { name: 'About' }).props.testID).toBe('target-header');
expect(screen.getByRole('header', { name: 'About' })).toBe(screen.getByTestId('target-header'));
expect(screen.getByRole('header', { name: 'About' }).props.testID).toBe('target-header');
});
test('returns an element with nested Text as children', () => {
const { getByRole, getByTestId } = render(
render(
<Text accessibilityRole="header" testID="parent">
<Text testID="child">About</Text>
</Text>
);
// assert on the testId to be sure that the returned element is the one with the accessibilityRole
expect(getByRole('header', { name: 'About' })).toBe(getByTestId('parent'));
expect(getByRole('header', { name: 'About' }).props.testID).toBe('parent');
expect(screen.getByRole('header', { name: 'About' })).toBe(screen.getByTestId('parent'));
expect(screen.getByRole('header', { name: 'About' }).props.testID).toBe('parent');
});
test('returns a header with an accessibilityLabel', () => {
const { getByRole, getByTestId } = render(
<Text accessibilityRole="header" testID="target-header" accessibilityLabel="About" />
);
render(<Text accessibilityRole="header" testID="target-header" accessibilityLabel="About" />);
// assert on the testId to be sure that the returned element is the one with the accessibilityRole
expect(getByRole('header', { name: 'About' })).toBe(getByTestId('target-header'));
expect(getByRole('header', { name: 'About' }).props.testID).toBe('target-header');
expect(screen.getByRole('header', { name: 'About' })).toBe(screen.getByTestId('target-header'));
expect(screen.getByRole('header', { name: 'About' }).props.testID).toBe('target-header');
});
});
describe('supports accessibility states', () => {
describe('disabled', () => {
test('returns a disabled element when required', () => {
const { getByRole, queryByRole } = render(
render(
<TouchableOpacity accessibilityRole="button" accessibilityState={{ disabled: true }} />
);
expect(getByRole('button', { disabled: true })).toBeTruthy();
expect(queryByRole('button', { disabled: false })).toBe(null);
expect(screen.getByRole('button', { disabled: true })).toBeTruthy();
expect(screen.queryByRole('button', { disabled: false })).toBe(null);
});
test('returns the correct element when only one matches all the requirements', () => {
const { getByRole } = render(
render(
<>
<TouchableOpacity
testID="correct"
@@ -250,43 +252,46 @@ describe('supports accessibility states', () => {
</>
);
expect(getByRole('button', { name: 'Save', disabled: true }).props.testID).toBe('correct');
expect(
screen.getByRole('button', {
name: 'Save',
disabled: true,
}).props.testID
).toBe('correct');
});
test('returns an implicitly enabled element', () => {
const { getByRole, queryByRole } = render(
<TouchableOpacity accessibilityRole="button"></TouchableOpacity>
);
render(<TouchableOpacity accessibilityRole="button"></TouchableOpacity>);
expect(getByRole('button', { disabled: false })).toBeTruthy();
expect(queryByRole('button', { disabled: true })).toBe(null);
expect(screen.getByRole('button', { disabled: false })).toBeTruthy();
expect(screen.queryByRole('button', { disabled: true })).toBe(null);
});
test('returns an explicitly enabled element', () => {
const { getByRole, queryByRole } = render(
render(
<TouchableOpacity
accessibilityRole="button"
accessibilityState={{ disabled: false }}
></TouchableOpacity>
);
expect(getByRole('button', { disabled: false })).toBeTruthy();
expect(queryByRole('button', { disabled: true })).toBe(null);
expect(screen.getByRole('button', { disabled: false })).toBeTruthy();
expect(screen.queryByRole('button', { disabled: true })).toBe(null);
});
test('does not return disabled elements when querying for non disabled', () => {
const { queryByRole } = render(
render(
<TouchableOpacity
accessibilityRole="button"
accessibilityState={{ disabled: true }}
></TouchableOpacity>
);
expect(queryByRole('button', { disabled: false })).toBe(null);
expect(screen.queryByRole('button', { disabled: false })).toBe(null);
});
test('returns elements using the built-in disabled prop', () => {
const { getByRole } = render(
render(
<>
<Pressable disabled accessibilityRole="button">
<Text>Pressable</Text>
@@ -301,32 +306,32 @@ describe('supports accessibility states', () => {
</>
);
expect(getByRole('button', { name: 'Pressable', disabled: true })).toBeTruthy();
expect(screen.getByRole('button', { name: 'Pressable', disabled: true })).toBeTruthy();
expect(
getByRole('button', {
screen.getByRole('button', {
name: 'TouchableWithoutFeedback',
disabled: true,
})
).toBeTruthy();
expect(getByRole('button', { name: 'RNButton', disabled: true })).toBeTruthy();
expect(screen.getByRole('button', { name: 'RNButton', disabled: true })).toBeTruthy();
});
test('supports aria-disabled={true} prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-disabled={true} />);
render(<View accessible accessibilityRole="button" aria-disabled={true} />);
expect(screen.getByRole('button', { disabled: true })).toBeTruthy();
expect(screen.queryByRole('button', { disabled: false })).toBeNull();
});
test('supports aria-disabled={false} prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-disabled={false} />);
render(<View accessible accessibilityRole="button" aria-disabled={false} />);
expect(screen.getByRole('button', { disabled: false })).toBeTruthy();
expect(screen.queryByRole('button', { disabled: true })).toBeNull();
});
test('supports default aria-disabled prop', () => {
const screen = render(<View accessible accessibilityRole="button" />);
render(<View accessible accessibilityRole="button" />);
expect(screen.getByRole('button', { disabled: false })).toBeTruthy();
expect(screen.queryByRole('button', { disabled: true })).toBeNull();
});
@@ -334,16 +339,14 @@ describe('supports accessibility states', () => {
describe('selected', () => {
test('returns a selected element when required', () => {
const { getByRole, queryByRole } = render(
<TouchableOpacity accessibilityRole="tab" accessibilityState={{ selected: true }} />
);
render(<TouchableOpacity accessibilityRole="tab" accessibilityState={{ selected: true }} />);
expect(getByRole('tab', { selected: true })).toBeTruthy();
expect(queryByRole('tab', { selected: false })).toBe(null);
expect(screen.getByRole('tab', { selected: true })).toBeTruthy();
expect(screen.queryByRole('tab', { selected: false })).toBe(null);
});
test('returns the correct element when only one matches all the requirements', () => {
const { getByRole } = render(
render(
<>
<TouchableOpacity
testID="correct"
@@ -358,55 +361,55 @@ describe('supports accessibility states', () => {
</>
);
expect(getByRole('tab', { name: 'Save', selected: true }).props.testID).toBe('correct');
expect(screen.getByRole('tab', { name: 'Save', selected: true }).props.testID).toBe(
'correct'
);
});
test('returns an implicitly non selected element', () => {
const { getByRole, queryByRole } = render(
<TouchableOpacity accessibilityRole="tab"></TouchableOpacity>
);
render(<TouchableOpacity accessibilityRole="tab"></TouchableOpacity>);
expect(getByRole('tab', { selected: false })).toBeTruthy();
expect(queryByRole('tab', { selected: true })).toBe(null);
expect(screen.getByRole('tab', { selected: false })).toBeTruthy();
expect(screen.queryByRole('tab', { selected: true })).toBe(null);
});
test('returns an explicitly non selected element', () => {
const { getByRole, queryByRole } = render(
render(
<TouchableOpacity
accessibilityRole="tab"
accessibilityState={{ selected: false }}
></TouchableOpacity>
);
expect(getByRole('tab', { selected: false })).toBeTruthy();
expect(queryByRole('tab', { selected: true })).toBe(null);
expect(screen.getByRole('tab', { selected: false })).toBeTruthy();
expect(screen.queryByRole('tab', { selected: true })).toBe(null);
});
test('does not return selected elements when querying for non selected', () => {
const { queryByRole } = render(
render(
<TouchableOpacity
accessibilityRole="tab"
accessibilityState={{ selected: true }}
></TouchableOpacity>
);
expect(queryByRole('tab', { selected: false })).toBe(null);
expect(screen.queryByRole('tab', { selected: false })).toBe(null);
});
test('supports aria-selected={true} prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-selected={true} />);
render(<View accessible accessibilityRole="button" aria-selected={true} />);
expect(screen.getByRole('button', { selected: true })).toBeTruthy();
expect(screen.queryByRole('button', { selected: false })).toBeNull();
});
test('supports aria-selected={false} prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-selected={false} />);
render(<View accessible accessibilityRole="button" aria-selected={false} />);
expect(screen.getByRole('button', { selected: false })).toBeTruthy();
expect(screen.queryByRole('button', { selected: true })).toBeNull();
});
test('supports default aria-selected prop', () => {
const screen = render(<View accessible accessibilityRole="button" />);
render(<View accessible accessibilityRole="button" />);
expect(screen.getByRole('button', { selected: false })).toBeTruthy();
expect(screen.queryByRole('button', { selected: true })).toBeNull();
});
@@ -414,35 +417,35 @@ describe('supports accessibility states', () => {
describe('checked', () => {
test('returns a checked element when required', () => {
const { getByRole, queryByRole } = render(
render(
<TouchableOpacity accessibilityRole="checkbox" accessibilityState={{ checked: true }} />
);
expect(getByRole('checkbox', { checked: true })).toBeTruthy();
expect(queryByRole('checkbox', { checked: false })).toBe(null);
expect(queryByRole('checkbox', { checked: 'mixed' })).toBe(null);
expect(screen.getByRole('checkbox', { checked: true })).toBeTruthy();
expect(screen.queryByRole('checkbox', { checked: false })).toBe(null);
expect(screen.queryByRole('checkbox', { checked: 'mixed' })).toBe(null);
});
it('returns `mixed` checkboxes', () => {
const { queryByRole, getByRole } = render(
render(
<TouchableOpacity accessibilityRole="checkbox" accessibilityState={{ checked: 'mixed' }} />
);
expect(getByRole('checkbox', { checked: 'mixed' })).toBeTruthy();
expect(queryByRole('checkbox', { checked: true })).toBe(null);
expect(queryByRole('checkbox', { checked: false })).toBe(null);
expect(screen.getByRole('checkbox', { checked: 'mixed' })).toBeTruthy();
expect(screen.queryByRole('checkbox', { checked: true })).toBe(null);
expect(screen.queryByRole('checkbox', { checked: false })).toBe(null);
});
it('does not return mixed checkboxes when querying for checked: true', () => {
const { queryByRole } = render(
render(
<TouchableOpacity accessibilityRole="checkbox" accessibilityState={{ checked: 'mixed' }} />
);
expect(queryByRole('checkbox', { checked: false })).toBe(null);
expect(screen.queryByRole('checkbox', { checked: false })).toBe(null);
});
test('returns the correct element when only one matches all the requirements', () => {
const { getByRole } = render(
render(
<>
<TouchableOpacity
testID="correct"
@@ -457,74 +460,77 @@ describe('supports accessibility states', () => {
</>
);
expect(getByRole('checkbox', { name: 'Save', checked: true }).props.testID).toBe('correct');
expect(
screen.getByRole('checkbox', {
name: 'Save',
checked: true,
}).props.testID
).toBe('correct');
});
test('does not return return as non checked an element with checked: undefined', () => {
const { queryByRole } = render(
<TouchableOpacity accessibilityRole="checkbox"></TouchableOpacity>
);
render(<TouchableOpacity accessibilityRole="checkbox"></TouchableOpacity>);
expect(queryByRole('checkbox', { checked: false })).toBe(null);
expect(screen.queryByRole('checkbox', { checked: false })).toBe(null);
});
test('returns an explicitly non checked element', () => {
const { getByRole, queryByRole } = render(
render(
<TouchableOpacity
accessibilityRole="checkbox"
accessibilityState={{ checked: false }}
></TouchableOpacity>
);
expect(getByRole('checkbox', { checked: false })).toBeTruthy();
expect(queryByRole('checkbox', { checked: true })).toBe(null);
expect(screen.getByRole('checkbox', { checked: false })).toBeTruthy();
expect(screen.queryByRole('checkbox', { checked: true })).toBe(null);
});
test('does not return checked elements when querying for non checked', () => {
const { queryByRole } = render(
render(
<TouchableOpacity
accessibilityRole="checkbox"
accessibilityState={{ checked: true }}
></TouchableOpacity>
);
expect(queryByRole('checkbox', { checked: false })).toBe(null);
expect(screen.queryByRole('checkbox', { checked: false })).toBe(null);
});
test('does not return mixed elements when querying for non checked', () => {
const { queryByRole } = render(
render(
<TouchableOpacity
accessibilityRole="checkbox"
accessibilityState={{ checked: 'mixed' }}
></TouchableOpacity>
);
expect(queryByRole('checkbox', { checked: false })).toBe(null);
expect(screen.queryByRole('checkbox', { checked: false })).toBe(null);
});
test('supports aria-checked={true} prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-checked={true} />);
render(<View accessible accessibilityRole="button" aria-checked={true} />);
expect(screen.getByRole('button', { checked: true })).toBeTruthy();
expect(screen.queryByRole('button', { checked: false })).toBeNull();
expect(screen.queryByRole('button', { checked: 'mixed' })).toBeNull();
});
test('supports aria-checked={false} prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-checked={false} />);
render(<View accessible accessibilityRole="button" aria-checked={false} />);
expect(screen.getByRole('button', { checked: false })).toBeTruthy();
expect(screen.queryByRole('button', { checked: true })).toBeNull();
expect(screen.queryByRole('button', { checked: 'mixed' })).toBeNull();
});
test('supports aria-checked="mixed prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-checked="mixed" />);
render(<View accessible accessibilityRole="button" aria-checked="mixed" />);
expect(screen.getByRole('button', { checked: 'mixed' })).toBeTruthy();
expect(screen.queryByRole('button', { checked: true })).toBeNull();
expect(screen.queryByRole('button', { checked: false })).toBeNull();
});
test('supports default aria-selected prop', () => {
const screen = render(<View accessible accessibilityRole="button" />);
render(<View accessible accessibilityRole="button" />);
expect(screen.getByRole('button')).toBeTruthy();
expect(screen.queryByRole('button', { checked: true })).toBeNull();
expect(screen.queryByRole('button', { checked: false })).toBeNull();
@@ -534,16 +540,14 @@ describe('supports accessibility states', () => {
describe('busy', () => {
test('returns a busy element when required', () => {
const { getByRole, queryByRole } = render(
<TouchableOpacity accessibilityRole="button" accessibilityState={{ busy: true }} />
);
render(<TouchableOpacity accessibilityRole="button" accessibilityState={{ busy: true }} />);
expect(getByRole('button', { busy: true })).toBeTruthy();
expect(queryByRole('button', { busy: false })).toBe(null);
expect(screen.getByRole('button', { busy: true })).toBeTruthy();
expect(screen.queryByRole('button', { busy: false })).toBe(null);
});
test('returns the correct element when only one matches all the requirements', () => {
const { getByRole } = render(
render(
<>
<TouchableOpacity
testID="correct"
@@ -558,55 +562,53 @@ describe('supports accessibility states', () => {
</>
);
expect(getByRole('button', { name: 'Save', busy: true }).props.testID).toBe('correct');
expect(screen.getByRole('button', { name: 'Save', busy: true }).props.testID).toBe('correct');
});
test('returns an implicitly non busy element', () => {
const { getByRole, queryByRole } = render(
<TouchableOpacity accessibilityRole="button"></TouchableOpacity>
);
render(<TouchableOpacity accessibilityRole="button"></TouchableOpacity>);
expect(getByRole('button', { busy: false })).toBeTruthy();
expect(queryByRole('button', { busy: true })).toBe(null);
expect(screen.getByRole('button', { busy: false })).toBeTruthy();
expect(screen.queryByRole('button', { busy: true })).toBe(null);
});
test('returns an explicitly non busy element', () => {
const { getByRole, queryByRole } = render(
render(
<TouchableOpacity
accessibilityRole="button"
accessibilityState={{ busy: false }}
></TouchableOpacity>
);
expect(getByRole('button', { busy: false })).toBeTruthy();
expect(queryByRole('button', { busy: true })).toBe(null);
expect(screen.getByRole('button', { busy: false })).toBeTruthy();
expect(screen.queryByRole('button', { busy: true })).toBe(null);
});
test('does not return busy elements when querying for non busy', () => {
const { queryByRole } = render(
render(
<TouchableOpacity
accessibilityRole="button"
accessibilityState={{ selected: true }}
></TouchableOpacity>
);
expect(queryByRole('button', { selected: false })).toBe(null);
expect(screen.queryByRole('button', { selected: false })).toBe(null);
});
test('supports aria-busy={true} prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-busy={true} />);
render(<View accessible accessibilityRole="button" aria-busy={true} />);
expect(screen.getByRole('button', { busy: true })).toBeTruthy();
expect(screen.queryByRole('button', { busy: false })).toBeNull();
});
test('supports aria-busy={false} prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-busy={false} />);
render(<View accessible accessibilityRole="button" aria-busy={false} />);
expect(screen.getByRole('button', { busy: false })).toBeTruthy();
expect(screen.queryByRole('button', { busy: true })).toBeNull();
});
test('supports default aria-busy prop', () => {
const screen = render(<View accessible accessibilityRole="button" />);
render(<View accessible accessibilityRole="button" />);
expect(screen.getByRole('button', { busy: false })).toBeTruthy();
expect(screen.queryByRole('button', { busy: true })).toBeNull();
});
@@ -614,16 +616,16 @@ describe('supports accessibility states', () => {
describe('expanded', () => {
test('returns a expanded element when required', () => {
const { getByRole, queryByRole } = render(
render(
<TouchableOpacity accessibilityRole="button" accessibilityState={{ expanded: true }} />
);
expect(getByRole('button', { expanded: true })).toBeTruthy();
expect(queryByRole('button', { expanded: false })).toBe(null);
expect(screen.getByRole('button', { expanded: true })).toBeTruthy();
expect(screen.queryByRole('button', { expanded: false })).toBe(null);
});
test('returns the correct element when only one matches all the requirements', () => {
const { getByRole } = render(
render(
<>
<TouchableOpacity
testID="correct"
@@ -638,54 +640,57 @@ describe('supports accessibility states', () => {
</>
);
expect(getByRole('button', { name: 'Save', expanded: true }).props.testID).toBe('correct');
expect(
screen.getByRole('button', {
name: 'Save',
expanded: true,
}).props.testID
).toBe('correct');
});
test('does not return return as non expanded an element with expanded: undefined', () => {
const { queryByRole } = render(
<TouchableOpacity accessibilityRole="button"></TouchableOpacity>
);
render(<TouchableOpacity accessibilityRole="button"></TouchableOpacity>);
expect(queryByRole('button', { expanded: false })).toBe(null);
expect(screen.queryByRole('button', { expanded: false })).toBe(null);
});
test('returns an explicitly non expanded element', () => {
const { getByRole, queryByRole } = render(
render(
<TouchableOpacity
accessibilityRole="button"
accessibilityState={{ expanded: false }}
></TouchableOpacity>
);
expect(getByRole('button', { expanded: false })).toBeTruthy();
expect(queryByRole('button', { expanded: true })).toBe(null);
expect(screen.getByRole('button', { expanded: false })).toBeTruthy();
expect(screen.queryByRole('button', { expanded: true })).toBe(null);
});
test('does not return expanded elements when querying for non expanded', () => {
const { queryByRole } = render(
render(
<TouchableOpacity
accessibilityRole="button"
accessibilityState={{ expanded: true }}
></TouchableOpacity>
);
expect(queryByRole('button', { expanded: false })).toBe(null);
expect(screen.queryByRole('button', { expanded: false })).toBe(null);
});
test('supports aria-expanded={true} prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-expanded={true} />);
render(<View accessible accessibilityRole="button" aria-expanded={true} />);
expect(screen.getByRole('button', { expanded: true })).toBeTruthy();
expect(screen.queryByRole('button', { expanded: false })).toBeNull();
});
test('supports aria-expanded={false} prop', () => {
const screen = render(<View accessible accessibilityRole="button" aria-expanded={false} />);
render(<View accessible accessibilityRole="button" aria-expanded={false} />);
expect(screen.getByRole('button', { expanded: false })).toBeTruthy();
expect(screen.queryByRole('button', { expanded: true })).toBeNull();
});
test('supports default aria-expanded prop', () => {
const screen = render(<View accessible accessibilityRole="button" />);
render(<View accessible accessibilityRole="button" />);
expect(screen.getByRole('button')).toBeTruthy();
expect(screen.queryByRole('button', { expanded: true })).toBeNull();
expect(screen.queryByRole('button', { expanded: false })).toBeNull();
@@ -693,7 +698,7 @@ describe('supports accessibility states', () => {
});
test('ignores non queried accessibilityState', () => {
const { getByRole, queryByRole } = render(
render(
<TouchableOpacity
accessibilityRole="button"
accessibilityState={{
@@ -707,13 +712,13 @@ describe('supports accessibility states', () => {
);
expect(
getByRole('button', {
screen.getByRole('button', {
name: 'Save',
disabled: true,
})
).toBeTruthy();
expect(
queryByRole('button', {
screen.queryByRole('button', {
name: 'Save',
disabled: false,
})
@@ -721,7 +726,7 @@ describe('supports accessibility states', () => {
});
test('matches an element combining all the options', () => {
const { getByRole } = render(
render(
<TouchableOpacity
accessibilityRole="button"
accessibilityState={{
@@ -737,7 +742,7 @@ describe('supports accessibility states', () => {
);
expect(
getByRole('button', {
screen.getByRole('button', {
name: 'Save',
disabled: true,
selected: true,
@@ -751,9 +756,9 @@ describe('supports accessibility states', () => {
describe('error messages', () => {
test('gives a descriptive error message when querying with a role', () => {
const { getByRole } = render(<View />);
render(<View />);
expect(() => getByRole('button')).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByRole('button')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "button"
<View />"
@@ -761,9 +766,9 @@ describe('error messages', () => {
});
test('gives a descriptive error message when querying with a role and a name', () => {
const { getByRole } = render(<View />);
render(<View />);
expect(() => getByRole('button', { name: 'Save' })).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByRole('button', { name: 'Save' })).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "button", name: "Save"
<View />"
@@ -771,9 +776,9 @@ describe('error messages', () => {
});
test('gives a descriptive error message when querying with a role, a name and accessibility state', () => {
const { getByRole } = render(<View />);
render(<View />);
expect(() => getByRole('button', { name: 'Save', disabled: true }))
expect(() => screen.getByRole('button', { name: 'Save', disabled: true }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "button", name: "Save", disabled state: true
@@ -782,9 +787,9 @@ describe('error messages', () => {
});
test('gives a descriptive error message when querying with a role, a name and several accessibility state', () => {
const { getByRole } = render(<View />);
render(<View />);
expect(() => getByRole('button', { name: 'Save', disabled: true, selected: true }))
expect(() => screen.getByRole('button', { name: 'Save', disabled: true, selected: true }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "button", name: "Save", disabled state: true, selected state: true
@@ -793,9 +798,10 @@ describe('error messages', () => {
});
test('gives a descriptive error message when querying with a role and an accessibility state', () => {
const { getByRole } = render(<View />);
render(<View />);
expect(() => getByRole('button', { disabled: true })).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByRole('button', { disabled: true }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "button", disabled state: true
<View />"
@@ -803,9 +809,9 @@ describe('error messages', () => {
});
test('gives a descriptive error message when querying with a role and an accessibility value', () => {
const { getByRole } = render(<View />);
render(<View />);
expect(() => getByRole('adjustable', { value: { min: 1 } }))
expect(() => screen.getByRole('adjustable', { value: { min: 1 } }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "adjustable", min value: 1
@@ -813,7 +819,7 @@ describe('error messages', () => {
`);
expect(() =>
getByRole('adjustable', {
screen.getByRole('adjustable', {
value: { min: 1, max: 2, now: 1, text: /hello/ },
})
).toThrowErrorMatchingInlineSnapshot(`
@@ -825,17 +831,17 @@ describe('error messages', () => {
});
test('byRole queries support hidden option', () => {
const { getByRole, queryByRole } = render(
render(
<Pressable accessibilityRole="button" style={{ display: 'none' }}>
<Text>Hidden from accessibility</Text>
</Pressable>
);
expect(getByRole('button', { includeHiddenElements: true })).toBeTruthy();
expect(screen.getByRole('button', { includeHiddenElements: true })).toBeTruthy();
expect(queryByRole('button')).toBeFalsy();
expect(queryByRole('button', { includeHiddenElements: false })).toBeFalsy();
expect(() => getByRole('button', { includeHiddenElements: false }))
expect(screen.queryByRole('button')).toBeFalsy();
expect(screen.queryByRole('button', { includeHiddenElements: false })).toBeFalsy();
expect(() => screen.getByRole('button', { includeHiddenElements: false }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "button"
@@ -857,37 +863,37 @@ test('byRole queries support hidden option', () => {
describe('matches only accessible elements', () => {
test('matches elements with accessible={true}', () => {
const { queryByRole } = render(
render(
<View accessibilityRole="menu" accessible={true}>
<Text>Action</Text>
</View>
);
expect(queryByRole('menu', { name: 'Action' })).toBeTruthy();
expect(screen.queryByRole('menu', { name: 'Action' })).toBeTruthy();
});
test('ignores elements with accessible={false}', () => {
const { queryByRole } = render(
render(
<Pressable accessibilityRole="button" accessible={false}>
<Text>Action</Text>
</Pressable>
);
expect(queryByRole('button', { name: 'Action' })).toBeFalsy();
expect(screen.queryByRole('button', { name: 'Action' })).toBeFalsy();
});
test('ignores elements with accessible={undefined} and that are implicitely not accessible', () => {
const { queryByRole } = render(
render(
<View accessibilityRole="menu">
<Text>Action</Text>
</View>
);
expect(queryByRole('menu', { name: 'Action' })).toBeFalsy();
expect(screen.queryByRole('menu', { name: 'Action' })).toBeFalsy();
});
});
test('error message renders the element tree, preserving only helpful props', async () => {
const view = render(<View accessibilityRole="button" key="3" />);
render(<View accessibilityRole="button" key="3" />);
expect(() => view.getByRole('link')).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByRole('link')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "link"
<View
@@ -895,7 +901,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
expect(() => view.getAllByRole('link')).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getAllByRole('link')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "link"
<View
@@ -903,7 +909,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findByRole('link')).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findByRole('link')).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "link"
<View
@@ -911,7 +917,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findAllByRole('link')).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findAllByRole('link')).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with role: "link"
<View
src/queries/__tests__/test-id.test.tsx
+44 -44
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import { render } from '../..';
import { Button, Text, TextInput, View } from 'react-native';
import { render, screen } from '../..';
const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -25,7 +25,7 @@ const Banana = () => (
const MyComponent = (_props: { testID?: string }) => <Text>My Component</Text>;
test('getByTestId returns only native elements', () => {
const { getByTestId, getAllByTestId } = render(
render(
<View>
<Text testID="text">Text</Text>
<TextInput testID="textInput" />
@@ -35,26 +35,26 @@ test('getByTestId returns only native elements', () => {
</View>
);
expect(getByTestId('text')).toBeTruthy();
expect(getByTestId('textInput')).toBeTruthy();
expect(getByTestId('view')).toBeTruthy();
expect(getByTestId('button')).toBeTruthy();
expect(screen.getByTestId('text')).toBeTruthy();
expect(screen.getByTestId('textInput')).toBeTruthy();
expect(screen.getByTestId('view')).toBeTruthy();
expect(screen.getByTestId('button')).toBeTruthy();
expect(getAllByTestId('text')).toHaveLength(1);
expect(getAllByTestId('textInput')).toHaveLength(1);
expect(getAllByTestId('view')).toHaveLength(1);
expect(getAllByTestId('button')).toHaveLength(1);
expect(screen.getAllByTestId('text')).toHaveLength(1);
expect(screen.getAllByTestId('textInput')).toHaveLength(1);
expect(screen.getAllByTestId('view')).toHaveLength(1);
expect(screen.getAllByTestId('button')).toHaveLength(1);
expect(() => getByTestId('myComponent')).toThrow(
expect(() => screen.getByTestId('myComponent')).toThrow(
'Unable to find an element with testID: myComponent'
);
expect(() => getAllByTestId('myComponent')).toThrow(
expect(() => screen.getAllByTestId('myComponent')).toThrow(
'Unable to find an element with testID: myComponent'
);
});
test('supports a regex matcher', () => {
const { getByTestId, getAllByTestId } = render(
render(
<View>
<Text testID="text">Text</Text>
<TextInput testID="textInput" />
@@ -64,58 +64,58 @@ test('supports a regex matcher', () => {
</View>
);
expect(getByTestId(/view/)).toBeTruthy();
expect(getAllByTestId(/text/)).toHaveLength(2);
expect(screen.getByTestId(/view/)).toBeTruthy();
expect(screen.getAllByTestId(/text/)).toHaveLength(2);
});
test('getByTestId, queryByTestId', () => {
const { getByTestId, queryByTestId } = render(<Banana />);
const component = getByTestId('bananaFresh');
render(<Banana />);
const component = screen.getByTestId('bananaFresh');
expect(component.props.children).toBe('not fresh');
expect(() => getByTestId('InExistent')).toThrow(
expect(() => screen.getByTestId('InExistent')).toThrow(
'Unable to find an element with testID: InExistent'
);
expect(getByTestId('bananaFresh')).toBe(component);
expect(queryByTestId('InExistent')).toBeNull();
expect(screen.getByTestId('bananaFresh')).toBe(component);
expect(screen.queryByTestId('InExistent')).toBeNull();
expect(() => getByTestId('duplicateText')).toThrow(
expect(() => screen.getByTestId('duplicateText')).toThrow(
'Found multiple elements with testID: duplicateText'
);
expect(() => queryByTestId('duplicateText')).toThrow(
expect(() => screen.queryByTestId('duplicateText')).toThrow(
'Found multiple elements with testID: duplicateText'
);
});
test('getAllByTestId, queryAllByTestId', () => {
const { getAllByTestId, queryAllByTestId } = render(<Banana />);
const textElements = getAllByTestId('duplicateText');
render(<Banana />);
const textElements = screen.getAllByTestId('duplicateText');
expect(textElements.length).toBe(2);
expect(textElements[0].props.children).toBe('First Text');
expect(textElements[1].props.children).toBe('Second Text');
expect(() => getAllByTestId('nonExistentTestId')).toThrow(
expect(() => screen.getAllByTestId('nonExistentTestId')).toThrow(
'Unable to find an element with testID: nonExistentTestId'
);
const queriedTextElements = queryAllByTestId('duplicateText');
const queriedTextElements = screen.queryAllByTestId('duplicateText');
expect(queriedTextElements.length).toBe(2);
expect(queriedTextElements[0]).toBe(textElements[0]);
expect(queriedTextElements[1]).toBe(textElements[1]);
expect(queryAllByTestId('nonExistentTestId')).toHaveLength(0);
expect(screen.queryAllByTestId('nonExistentTestId')).toHaveLength(0);
});
test('findByTestId and findAllByTestId work asynchronously', async () => {
const options = { timeout: 10 }; // Short timeout so that this test runs quickly
const { rerender, findByTestId, findAllByTestId } = render(<View />);
await expect(findByTestId('aTestId', {}, options)).rejects.toBeTruthy();
await expect(findAllByTestId('aTestId', {}, options)).rejects.toBeTruthy();
render(<View />);
await expect(screen.findByTestId('aTestId', {}, options)).rejects.toBeTruthy();
await expect(screen.findAllByTestId('aTestId', {}, options)).rejects.toBeTruthy();
setTimeout(
() =>
rerender(
screen.rerender(
<View testID="aTestId">
<Text>Some Text</Text>
<TextInput placeholder="Placeholder Text" />
@@ -125,22 +125,22 @@ test('findByTestId and findAllByTestId work asynchronously', async () => {
20
);
await expect(findByTestId('aTestId')).resolves.toBeTruthy();
await expect(findAllByTestId('aTestId')).resolves.toHaveLength(1);
await expect(screen.findByTestId('aTestId')).resolves.toBeTruthy();
await expect(screen.findAllByTestId('aTestId')).resolves.toHaveLength(1);
}, 20000);
test('byTestId queries support hidden option', () => {
const { getByTestId, queryByTestId } = render(
render(
<Text style={{ display: 'none' }} testID="hidden">
Hidden from accessibility
</Text>
);
expect(getByTestId('hidden', { includeHiddenElements: true })).toBeTruthy();
expect(screen.getByTestId('hidden', { includeHiddenElements: true })).toBeTruthy();
expect(queryByTestId('hidden')).toBeFalsy();
expect(queryByTestId('hidden', { includeHiddenElements: false })).toBeFalsy();
expect(() => getByTestId('hidden', { includeHiddenElements: false }))
expect(screen.queryByTestId('hidden')).toBeFalsy();
expect(screen.queryByTestId('hidden', { includeHiddenElements: false })).toBeFalsy();
expect(() => screen.getByTestId('hidden', { includeHiddenElements: false }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with testID: hidden
@@ -158,9 +158,9 @@ test('byTestId queries support hidden option', () => {
});
test('error message renders the element tree, preserving only helpful props', async () => {
const view = render(<View testID="TEST_ID" key="3" />);
render(<View testID="TEST_ID" key="3" />);
expect(() => view.getByTestId('FOO')).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByTestId('FOO')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with testID: FOO
<View
@@ -168,7 +168,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
expect(() => view.getAllByTestId('FOO')).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getAllByTestId('FOO')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with testID: FOO
<View
@@ -176,7 +176,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findByTestId('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findByTestId('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with testID: FOO
<View
@@ -184,7 +184,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findAllByTestId('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findAllByTestId('FOO')).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with testID: FOO
<View
src/queries/__tests__/text.test.tsx
+95 -94
View File
@@ -1,28 +1,28 @@
import * as React from 'react';
import { Button, Image, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { getDefaultNormalizer, render, within } from '../..';
import { getDefaultNormalizer, render, screen, within } from '../..';
test('byText matches simple text', () => {
const { getByText } = render(<Text testID="text">Hello World</Text>);
expect(getByText('Hello World').props.testID).toBe('text');
render(<Text testID="text">Hello World</Text>);
expect(screen.getByText('Hello World').props.testID).toBe('text');
});
test('byText matches inner nested text', () => {
const { getByText } = render(
render(
<Text testID="outer">
<Text testID="inner">Hello World</Text>
</Text>
);
expect(getByText('Hello World').props.testID).toBe('inner');
expect(screen.getByText('Hello World').props.testID).toBe('inner');
});
test('byText matches accross multiple texts', () => {
const { getByText } = render(
render(
<Text testID="outer">
<Text testID="inner-1">Hello</Text> <Text testID="inner-2">World</Text>
</Text>
);
expect(getByText('Hello World').props.testID).toBe('outer');
expect(screen.getByText('Hello World').props.testID).toBe('outer');
});
type MyButtonProps = {
@@ -53,25 +53,27 @@ const Banana = () => {
type ChildrenProps = { children: React.ReactNode };
test('getByText, queryByText', () => {
const { getByText, queryByText } = render(<Banana />);
const button = getByText(/change/i);
render(<Banana />);
const button = screen.getByText(/change/i);
expect(button.props.children).toBe('Change freshness!');
const sameButton = getByText('not fresh');
const sameButton = screen.getByText('not fresh');
expect(sameButton.props.children).toBe('not fresh');
expect(() => getByText('InExistent')).toThrow('Unable to find an element with text: InExistent');
expect(() => screen.getByText('InExistent')).toThrow(
'Unable to find an element with text: InExistent'
);
const zeroText = getByText('0');
const zeroText = screen.getByText('0');
expect(queryByText(/change/i)).toBe(button);
expect(queryByText('InExistent')).toBeNull();
expect(() => queryByText(/fresh/)).toThrow('Found multiple elements with text: /fresh/');
expect(queryByText('0')).toBe(zeroText);
expect(screen.queryByText(/change/i)).toBe(button);
expect(screen.queryByText('InExistent')).toBeNull();
expect(() => screen.queryByText(/fresh/)).toThrow('Found multiple elements with text: /fresh/');
expect(screen.queryByText('0')).toBe(zeroText);
});
test('getByText, queryByText with children as Array', () => {
test('getByText, screen.queryByText with children as Array', () => {
type BananaCounterProps = { numBananas: number };
const BananaCounter = ({ numBananas }: BananaCounterProps) => (
<Text>There are {numBananas} bananas in the bunch</Text>
@@ -85,34 +87,34 @@ test('getByText, queryByText with children as Array', () => {
</View>
);
const { getByText } = render(<BananaStore />);
render(<BananaStore />);
const threeBananaBunch = getByText('There are 3 bananas in the bunch');
const threeBananaBunch = screen.getByText('There are 3 bananas in the bunch');
expect(threeBananaBunch.props.children).toEqual(['There are ', 3, ' bananas in the bunch']);
});
test('getAllByText, queryAllByText', () => {
const { getAllByText, queryAllByText } = render(<Banana />);
const buttons = getAllByText(/fresh/i);
render(<Banana />);
const buttons = screen.getAllByText(/fresh/i);
expect(buttons).toHaveLength(3);
expect(() => getAllByText('InExistent')).toThrow(
expect(() => screen.getAllByText('InExistent')).toThrow(
'Unable to find an element with text: InExistent'
);
expect(queryAllByText(/fresh/i)).toEqual(buttons);
expect(queryAllByText('InExistent')).toHaveLength(0);
expect(screen.queryAllByText(/fresh/i)).toEqual(buttons);
expect(screen.queryAllByText('InExistent')).toHaveLength(0);
});
test('findByText queries work asynchronously', async () => {
const options = { timeout: 10 }; // Short timeout so that this test runs quickly
const { rerender, findByText, findAllByText } = render(<View />);
await expect(findByText('Some Text', {}, options)).rejects.toBeTruthy();
await expect(findAllByText('Some Text', {}, options)).rejects.toBeTruthy();
render(<View />);
await expect(screen.findByText('Some Text', {}, options)).rejects.toBeTruthy();
await expect(screen.findAllByText('Some Text', {}, options)).rejects.toBeTruthy();
setTimeout(
() =>
rerender(
screen.rerender(
<View>
<Text>Some Text</Text>
</View>
@@ -120,8 +122,8 @@ test('findByText queries work asynchronously', async () => {
20
);
await expect(findByText('Some Text')).resolves.toBeTruthy();
await expect(findAllByText('Some Text')).resolves.toHaveLength(1);
await expect(screen.findByText('Some Text')).resolves.toBeTruthy();
await expect(screen.findAllByText('Some Text')).resolves.toHaveLength(1);
}, 20000);
test('getByText works properly with custom text component', () => {
@@ -142,6 +144,7 @@ test('getByText works properly with custom text container', () => {
function MyText({ children }: ChildrenProps) {
return <Text>{children}</Text>;
}
function BoldText({ children }: ChildrenProps) {
return <Text>{children}</Text>;
}
@@ -201,7 +204,7 @@ test('queryByText not found', () => {
});
test('*ByText matches text across multiple nested Text', () => {
const { getByText } = render(
render(
<Text nativeID="1">
Hello{' '}
<Text nativeID="2">
@@ -211,7 +214,7 @@ test('*ByText matches text across multiple nested Text', () => {
</Text>
);
expect(getByText('Hello World!')).toBeTruthy();
expect(screen.getByText('Hello World!')).toBeTruthy();
});
test('queryByText with nested Text components return the closest Text', () => {
@@ -221,8 +224,8 @@ test('queryByText with nested Text components return the closest Text', () => {
</Text>
);
const { queryByText } = render(<NestedTexts />);
expect(queryByText('My text', { exact: false })?.props.nativeID).toBe('2');
render(<NestedTexts />);
expect(screen.queryByText('My text', { exact: false })?.props.nativeID).toBe('2');
});
test('queryByText with nested Text components each with text return the lowest one', () => {
@@ -233,9 +236,9 @@ test('queryByText with nested Text components each with text return the lowest o
</Text>
);
const { queryByText } = render(<NestedTexts />);
render(<NestedTexts />);
expect(queryByText('My text', { exact: false })?.props.nativeID).toBe('2');
expect(screen.queryByText('My text', { exact: false })?.props.nativeID).toBe('2');
});
test('queryByText nested deep <CustomText> in <Text>', () => {
@@ -253,7 +256,7 @@ test('queryByText nested deep <CustomText> in <Text>', () => {
});
test('queryByText with nested Text components: not-exact text match returns the most deeply nested common component', () => {
const { queryByText: queryByTextFirstCase } = render(
render(
<Text nativeID="1">
bob
<Text nativeID="2">My </Text>
@@ -261,15 +264,15 @@ test('queryByText with nested Text components: not-exact text match returns the
</Text>
);
const { queryByText: queryByTextSecondCase } = render(
render(
<Text nativeID="1">
bob
<Text nativeID="2">My text for test</Text>
</Text>
);
expect(queryByTextFirstCase('My text')).toBe(null);
expect(queryByTextSecondCase('My text', { exact: false })?.props.nativeID).toBe('2');
expect(screen.queryByText('My text')).toBe(null);
expect(screen.queryByText('My text', { exact: false })?.props.nativeID).toBe('2');
});
test('queryAllByText does not match several times the same text', () => {
@@ -297,68 +300,68 @@ test('queryAllByText matches all the matching nodes', () => {
describe('supports TextMatch options', () => {
test('getByText, getAllByText', () => {
const { getByText, getAllByText } = render(
render(
<View>
<Text testID="text">Text and details</Text>
<Button testID="button" title="Button and a detail" onPress={jest.fn()} />
</View>
);
expect(getByText('details', { exact: false })).toBeTruthy();
expect(getAllByText('detail', { exact: false })).toHaveLength(2);
expect(screen.getByText('details', { exact: false })).toBeTruthy();
expect(screen.getAllByText('detail', { exact: false })).toHaveLength(2);
});
test('getByPlaceholderText, getAllByPlaceholderText', () => {
const { getByPlaceholderText, getAllByPlaceholderText } = render(
render(
<View>
<TextInput placeholder={'Placeholder with details'} />
<TextInput placeholder={'Placeholder with a DETAIL'} />
</View>
);
expect(getByPlaceholderText('details', { exact: false })).toBeTruthy();
expect(getAllByPlaceholderText('detail', { exact: false })).toHaveLength(2);
expect(screen.getByPlaceholderText('details', { exact: false })).toBeTruthy();
expect(screen.getAllByPlaceholderText('detail', { exact: false })).toHaveLength(2);
});
test('getByDisplayValue, getAllByDisplayValue', () => {
const { getByDisplayValue, getAllByDisplayValue } = render(
render(
<View>
<TextInput value={'Value with details'} />
<TextInput value={'Value with a detail'} />
</View>
);
expect(getByDisplayValue('details', { exact: false })).toBeTruthy();
expect(getAllByDisplayValue('detail', { exact: false })).toHaveLength(2);
expect(screen.getByDisplayValue('details', { exact: false })).toBeTruthy();
expect(screen.getAllByDisplayValue('detail', { exact: false })).toHaveLength(2);
});
test('getByTestId, getAllByTestId', () => {
const { getByTestId, getAllByTestId } = render(
render(
<View>
<View testID="test" />
<View testID="tests id" />
</View>
);
expect(getByTestId('id', { exact: false })).toBeTruthy();
expect(getAllByTestId('test', { exact: false })).toHaveLength(2);
expect(screen.getByTestId('id', { exact: false })).toBeTruthy();
expect(screen.getAllByTestId('test', { exact: false })).toHaveLength(2);
});
test('with TextMatch option exact === false text search is NOT case sensitive', () => {
const { getByText, getAllByText } = render(
render(
<View>
<Text testID="text">Text and details</Text>
<Button testID="button" title="Button and a DeTAil" onPress={jest.fn()} />
</View>
);
expect(getByText('DeTaIlS', { exact: false })).toBeTruthy();
expect(getAllByText('detail', { exact: false })).toHaveLength(2);
expect(screen.getByText('DeTaIlS', { exact: false })).toBeTruthy();
expect(screen.getAllByText('detail', { exact: false })).toHaveLength(2);
});
});
describe('Supports normalization', () => {
test('trims and collapses whitespace by default', () => {
const { getByText } = render(
render(
<View>
<Text>{` Text and
@@ -366,21 +369,21 @@ describe('Supports normalization', () => {
</View>
);
expect(getByText('Text and whitespace')).toBeTruthy();
expect(screen.getByText('Text and whitespace')).toBeTruthy();
});
test('trim and collapseWhitespace is customizable by getDefaultNormalizer param', () => {
const testTextWithWhitespace = ` Text and
whitespace`;
const { getByText } = render(
render(
<View>
<Text>{testTextWithWhitespace}</Text>
</View>
);
expect(
getByText(testTextWithWhitespace, {
screen.getByText(testTextWithWhitespace, {
normalizer: getDefaultNormalizer({
trim: false,
collapseWhitespace: false,
@@ -392,38 +395,38 @@ describe('Supports normalization', () => {
test('normalizer function is customisable', () => {
const testText = 'A TO REMOVE text';
const normalizerFn = (textToNormalize: string) => textToNormalize.replace('TO REMOVE ', '');
const { getByText } = render(
render(
<View>
<Text>{testText}</Text>
</View>
);
expect(getByText('A text', { normalizer: normalizerFn })).toBeTruthy();
expect(screen.getByText('A text', { normalizer: normalizerFn })).toBeTruthy();
});
});
test('getByText and queryByText work properly with text nested in React.Fragment', () => {
const { getByText, queryByText } = render(
render(
<Text>
<>Hello</>
</Text>
);
expect(getByText('Hello')).toBeTruthy();
expect(queryByText('Hello')).not.toBeNull();
expect(screen.getByText('Hello')).toBeTruthy();
expect(screen.queryByText('Hello')).not.toBeNull();
});
test('getByText and queryByText work properly with text partially nested in React.Fragment', () => {
const { getByText, queryByText } = render(
render(
<Text>
He<>llo</>
</Text>
);
expect(getByText('Hello')).toBeTruthy();
expect(queryByText('Hello')).not.toBeNull();
expect(screen.getByText('Hello')).toBeTruthy();
expect(screen.queryByText('Hello')).not.toBeNull();
});
test('getByText and queryByText work properly with multiple nested fragments', () => {
const { getByText, queryByText } = render(
render(
<Text>
He
<>
@@ -431,46 +434,44 @@ test('getByText and queryByText work properly with multiple nested fragments', (
</>
</Text>
);
expect(getByText('Hello')).toBeTruthy();
expect(queryByText('Hello')).not.toBeNull();
expect(screen.getByText('Hello')).toBeTruthy();
expect(screen.queryByText('Hello')).not.toBeNull();
});
test('getByText and queryByText work with newlines', () => {
const textWithNewLines = 'Line 1\nLine 2';
const { getByText, queryByText } = render(<Text>{textWithNewLines}</Text>);
expect(getByText(textWithNewLines)).toBeTruthy();
expect(queryByText(textWithNewLines)).toBeTruthy();
render(<Text>{textWithNewLines}</Text>);
expect(screen.getByText(textWithNewLines)).toBeTruthy();
expect(screen.queryByText(textWithNewLines)).toBeTruthy();
});
test('getByText and queryByText work with tabs', () => {
const textWithTabs = 'Line 1\tLine 2';
const { getByText, queryByText } = render(<Text>{textWithTabs}</Text>);
expect(getByText(textWithTabs)).toBeTruthy();
expect(queryByText(textWithTabs)).toBeTruthy();
render(<Text>{textWithTabs}</Text>);
expect(screen.getByText(textWithTabs)).toBeTruthy();
expect(screen.queryByText(textWithTabs)).toBeTruthy();
});
test('getByText searches for text within itself', () => {
const { getByText } = render(<Text testID="subject">Hello</Text>);
const textNode = within(getByText('Hello'));
render(<Text testID="subject">Hello</Text>);
const textNode = within(screen.getByText('Hello'));
expect(textNode.getByText('Hello')).toBeTruthy();
});
test('getByText searches for text within self host element', () => {
const { getByTestId } = render(<Text testID="subject">Hello</Text>);
const textNode = within(getByTestId('subject'));
render(<Text testID="subject">Hello</Text>);
const textNode = within(screen.getByTestId('subject'));
expect(textNode.getByText('Hello')).toBeTruthy();
});
test('byText support hidden option', () => {
const { getByText, queryByText } = render(
<Text style={{ display: 'none' }}>Hidden from accessibility</Text>
);
render(<Text style={{ display: 'none' }}>Hidden from accessibility</Text>);
expect(getByText(/hidden/i, { includeHiddenElements: true })).toBeTruthy();
expect(screen.getByText(/hidden/i, { includeHiddenElements: true })).toBeTruthy();
expect(queryByText(/hidden/i)).toBeFalsy();
expect(queryByText(/hidden/i, { includeHiddenElements: false })).toBeFalsy();
expect(() => getByText(/hidden/i, { includeHiddenElements: false }))
expect(screen.queryByText(/hidden/i)).toBeFalsy();
expect(screen.queryByText(/hidden/i, { includeHiddenElements: false })).toBeFalsy();
expect(() => screen.getByText(/hidden/i, { includeHiddenElements: false }))
.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with text: /hidden/i
@@ -487,9 +488,9 @@ test('byText support hidden option', () => {
});
test('error message renders the element tree, preserving only helpful props', async () => {
const view = render(<View accessibilityViewIsModal key="this is filtered" />);
render(<View accessibilityViewIsModal key="this is filtered" />);
expect(() => view.getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with text: /foo/
<View
@@ -497,7 +498,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
expect(() => view.getAllByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
expect(() => screen.getAllByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with text: /foo/
<View
@@ -505,7 +506,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findByText(/foo/)).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findByText(/foo/)).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with text: /foo/
<View
@@ -513,7 +514,7 @@ test('error message renders the element tree, preserving only helpful props', as
/>"
`);
await expect(view.findAllByText(/foo/)).rejects.toThrowErrorMatchingInlineSnapshot(`
await expect(screen.findAllByText(/foo/)).rejects.toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element with text: /foo/
<View
@@ -523,6 +524,6 @@ test('error message renders the element tree, preserving only helpful props', as
});
test('byText should return host component', () => {
const { getByText } = render(<Text>hello</Text>);
expect(getByText('hello').type).toBe('Text');
render(<Text>hello</Text>);
expect(screen.getByText('hello').type).toBe('Text');
});
src/user-event/__tests__/clear.test.tsx
+7 -7
View File
@@ -1,7 +1,7 @@
import * as React from 'react';
import { View, TextInput, TextInputProps } from 'react-native';
import { createEventLogger } from '../../test-utils/events';
import { render, userEvent } from '../..';
import { TextInput, TextInputProps, View } from 'react-native';
import { createEventLogger } from '../../test-utils';
import { render, userEvent, screen } from '../..';
beforeEach(() => {
jest.useRealTimers();
@@ -10,7 +10,7 @@ beforeEach(() => {
function renderTextInputWithToolkit(props: TextInputProps = {}) {
const { events, logEvent } = createEventLogger();
const screen = render(
render(
<TextInput
testID="input"
onFocus={logEvent('focus')}
@@ -159,7 +159,7 @@ describe('clear()', () => {
it('works when not all events have handlers', async () => {
const { events, logEvent } = createEventLogger();
const screen = render(
render(
<TextInput
testID="input"
onChangeText={logEvent('changeText')}
@@ -177,7 +177,7 @@ describe('clear()', () => {
});
it('does NOT work on View', async () => {
const screen = render(<View testID="input" />);
render(<View testID="input" />);
const user = userEvent.setup();
await expect(
@@ -192,7 +192,7 @@ describe('clear()', () => {
it('does NOT bubble up', async () => {
const parentHandler = jest.fn();
const screen = render(
render(
<AnyView
onChangeText={parentHandler}
onChange={parentHandler}
src/user-event/scroll/__tests__/scroll-to.test.tsx
+1 -1
View File
@@ -186,7 +186,7 @@ describe('scrollTo()', () => {
});
it('does NOT work on View', async () => {
const screen = render(<View testID="view" />);
render(<View testID="view" />);
const user = userEvent.setup();
await expect(
src/user-event/type/__tests__/type-managed.test.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
import * as React from 'react';
import { TextInput } from 'react-native';
import { createEventLogger } from '../../../test-utils/events';
import { render } from '../../..';
import { createEventLogger } from '../../../test-utils';
import { render, screen } from '../../..';
import { userEvent } from '../..';
beforeEach(() => {
@@ -51,7 +51,7 @@ describe('type() for managed TextInput', () => {
it('supports basic case', async () => {
jest.spyOn(Date, 'now').mockImplementation(() => 100100100100);
const { events, logEvent } = createEventLogger();
const screen = render(<ManagedTextInput logEvent={logEvent} />);
render(<ManagedTextInput logEvent={logEvent} />);
const user = userEvent.setup();
await user.type(screen.getByTestId('input'), 'Wow');
@@ -83,7 +83,7 @@ describe('type() for managed TextInput', () => {
test('supports rejecting TextInput', async () => {
jest.spyOn(Date, 'now').mockImplementation(() => 100100100100);
const { events, logEvent } = createEventLogger();
const screen = render(
render(
<ManagedTextInput initialValue="XXX" logEvent={logEvent} valueTransformer={() => 'XXX'} />
);
src/user-event/type/__tests__/type.test.tsx
+8 -8
View File
@@ -1,7 +1,7 @@
import * as React from 'react';
import { View, TextInput, TextInputProps } from 'react-native';
import { createEventLogger } from '../../../test-utils/events';
import { render } from '../../..';
import { TextInput, TextInputProps, View } from 'react-native';
import { createEventLogger } from '../../../test-utils';
import { render, screen } from '../../..';
import { userEvent } from '../..';
beforeEach(() => {
@@ -11,7 +11,7 @@ beforeEach(() => {
function renderTextInputWithToolkit(props: TextInputProps = {}) {
const { events, logEvent } = createEventLogger();
const screen = render(
render(
<TextInput
testID="input"
onFocus={logEvent('focus')}
@@ -251,7 +251,7 @@ describe('type()', () => {
it('works when not all events have handlers', async () => {
const { events, logEvent } = createEventLogger();
const screen = render(
render(
<TextInput
testID="input"
onChangeText={logEvent('changeText')}
@@ -269,7 +269,7 @@ describe('type()', () => {
});
it('does NOT work on View', async () => {
const screen = render(<View testID="input" />);
render(<View testID="input" />);
const user = userEvent.setup();
await expect(
@@ -284,7 +284,7 @@ describe('type()', () => {
it('does NOT bubble up', async () => {
const parentHandler = jest.fn();
const screen = render(
render(
<AnyView
onChangeText={parentHandler}
onChange={parentHandler}
@@ -307,7 +307,7 @@ describe('type()', () => {
it('supports direct access', async () => {
const { events, logEvent } = createEventLogger();
const screen = render(
render(
<TextInput
testID="input"
onChangeText={logEvent('changeText')}
src/user-event/utils/__tests__/dispatch-event.test.tsx
+4 -4
View File
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Text } from 'react-native';
import render from '../../../render';
import { render, screen } from '../../../';
import { dispatchEvent } from '../dispatch-event';
import { EventBuilder } from '../../event-builder';
@@ -9,7 +9,7 @@ const TOUCH_EVENT = EventBuilder.Common.touch();
describe('dispatchEvent', () => {
it('does dispatch event', () => {
const onPress = jest.fn();
const screen = render(<Text testID="text" onPress={onPress} />);
render(<Text testID="text" onPress={onPress} />);
dispatchEvent(screen.getByTestId('text'), 'press', TOUCH_EVENT);
expect(onPress).toHaveBeenCalledTimes(1);
@@ -17,7 +17,7 @@ describe('dispatchEvent', () => {
it('does not dispatch event to parent host component', () => {
const onPressParent = jest.fn();
const screen = render(
render(
<Text onPress={onPressParent}>
<Text testID="text" />
</Text>
@@ -28,7 +28,7 @@ describe('dispatchEvent', () => {
});
it('does NOT throw if no handler found', () => {
const screen = render(
render(
<Text>
<Text testID="text" />
</Text>
website/docs/UnderstandingAct.md
+13 -11
View File
@@ -128,9 +128,11 @@ function TestAsyncComponent() {
```
```jsx
import { render, screen } from '@testing-library/react-native';
test('render async natively', () => {
const view = render(<TestAsyncComponent />);
expect(view.getByText('Count 0')).toBeOnTheScreen();
render(<TestAsyncComponent />);
expect(screen.getByText('Count 0')).toBeOnTheScreen();
});
```
@@ -156,12 +158,12 @@ First solution is to use Jest's fake timers inside out tests:
```jsx
test('render with fake timers', () => {
jest.useFakeTimers();
const view = render(<TestAsyncComponent />);
render(<TestAsyncComponent />);
act(() => {
jest.runAllTimers();
});
expect(view.getByText('Count 1')).toBeOnTheScreen();
expect(screen.getByText('Count 1')).toBeOnTheScreen();
});
```
@@ -173,12 +175,12 @@ If we wanted to stick with real timers then things get a bit more complex. Let
```jsx
test('render with real timers - sleep', async () => {
const view = render(<TestAsyncComponent />);
render(<TestAsyncComponent />);
await act(async () => {
await sleep(100); // Wait a bit longer than setTimeout in `TestAsyncComponent`
});
expect(view.getByText('Count 1')).toBeOnTheScreen();
expect(screen.getByText('Count 1')).toBeOnTheScreen();
});
```
@@ -188,10 +190,10 @@ Let’s try more elegant solution using `waitFor` that will wait for our desired
```jsx
test('render with real timers - waitFor', async () => {
const view = render(<TestAsyncComponent />);
render(<TestAsyncComponent />);
await waitFor(() => view.getByText('Count 1'));
expect(view.getByText('Count 1')).toBeOnTheScreen();
await waitFor(() => screen.getByText('Count 1'));
expect(screen.getByText('Count 1')).toBeOnTheScreen();
});
```
@@ -201,9 +203,9 @@ The above code can be simplified using `findBy` query:
```jsx
test('render with real timers - findBy', async () => {
const view = render(<TestAsyncComponent />);
render(<TestAsyncComponent />);
expect(await view.findByText('Count 1')).toBeOnTheScreen();
expect(await screen.findByText('Count 1')).toBeOnTheScreen();
});
```