Skip to content

Commit 1cccd0b

Browse files
creature-water-valleycreature-water-valley
committed
- feat: add renderHook function(callstack/react-native-testing-library#923)
1 parent 54c8772 commit 1cccd0b

36 files changed

+498
-479
lines changed

‎example-app/SantokuApp/src/App.test.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import '@testing-library/jest-native/extend-expect';
2-
import {render, waitFor} from '@testing-library/react-native';
2+
import {render, screen, waitFor} from '@testing-library/react-native';
33
import React from 'react';
44

55
import {App} from './App';
@@ -102,11 +102,11 @@ beforeEach(() => {
102102

103103
describe('App', () => {
104104
it('マウントされたときに正常にレンダリングされること', async () => {
105-
const app = render(<App />);
105+
render(<App />);
106106
await waitFor(
107107
() => {
108-
expect(app.queryByTestId('HomeScreen')).not.toBeNull();
109-
expect(app).toMatchSnapshot();
108+
expect(screen.queryByTestId('HomeScreen')).not.toBeNull();
109+
expect(screen).toMatchSnapshot();
110110
},
111111
{timeout: 60000},
112112
);

‎example-app/SantokuApp/src/components/button/Button.test.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import {fireEvent, render} from '@testing-library/react-native';
1+
import {fireEvent, render, screen} from '@testing-library/react-native';
22
import React from 'react';
33

44
import {Button} from './Button';
55

66
describe('Button', () => {
77
it('Buttonが正常にrenderできることを確認', () => {
8-
const renderResult = render(<Button title="ボタン" />);
9-
expect(renderResult.queryByText('ボタン')).not.toBeNull();
10-
expect(renderResult).toMatchSnapshot();
8+
render(<Button title="ボタン" />);
9+
expect(screen.queryByText('ボタン')).not.toBeNull();
10+
expect(screen).toMatchSnapshot();
1111
});
1212

1313
it('Buttonのプレス時にコールバックが実行されることを確認', () => {
1414
const handlePress = jest.fn();
15-
const renderResult = render(<Button testID="button" onPress={handlePress} />);
16-
fireEvent.press(renderResult.getByTestId('button'));
15+
render(<Button testID="button" onPress={handlePress} />);
16+
fireEvent.press(screen.getByTestId('button'));
1717
expect(handlePress).toHaveBeenCalledTimes(1);
1818
});
1919

‎example-app/SantokuApp/src/components/button/IconButton.test.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import {fireEvent, render} from '@testing-library/react-native';
1+
import {fireEvent, render, screen} from '@testing-library/react-native';
22
import React from 'react';
33

44
import {IconButton} from './IconButton';
55

66
describe('IconButton', () => {
77
it('IconButtonが正常にrenderできることを確認', () => {
8-
const renderResult = render(<IconButton name="close" />);
9-
expect(renderResult).toMatchSnapshot();
8+
render(<IconButton name="close" />);
9+
expect(screen).toMatchSnapshot();
1010
});
1111

1212
it('IconButtonのプレス時にコールバックが実行されることを確認', () => {
1313
const handlePress = jest.fn();
14-
const renderResult = render(<IconButton testID="IconButton" onPress={handlePress} name="close" />);
15-
fireEvent.press(renderResult.getByTestId('IconButtonTouchableOpacity'));
14+
render(<IconButton testID="IconButton" onPress={handlePress} name="close" />);
15+
fireEvent.press(screen.getByTestId('IconButtonTouchableOpacity'));
1616
expect(handlePress).toHaveBeenCalledTimes(1);
1717
});
1818
});

‎example-app/SantokuApp/src/components/overlay/FullWindowOverlay.test.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {render} from '@testing-library/react-native';
1+
import {render, screen} from '@testing-library/react-native';
22
import React from 'react';
33
import {Text} from 'react-native';
44

@@ -19,28 +19,28 @@ describe('FullWindowOverlay', () => {
1919
OS: 'ios',
2020
}));
2121

22-
const renderResult = render(
22+
render(
2323
<FullWindowOverlay>
2424
<ChildComponent />
2525
</FullWindowOverlay>,
2626
);
27-
expect(renderResult.queryByTestId('FullWindowOverlay')).not.toBeNull();
28-
expect(renderResult.queryByTestId('text')).not.toBeNull();
29-
expect(renderResult).toMatchSnapshot();
27+
expect(screen.queryByTestId('FullWindowOverlay')).not.toBeNull();
28+
expect(screen.queryByTestId('text')).not.toBeNull();
29+
expect(screen).toMatchSnapshot();
3030
});
3131

3232
it('Android環境で子要素を含めて正常にrenderできることを確認', () => {
3333
jest.mock('react-native/Libraries/Utilities/Platform', () => ({
3434
OS: 'android',
3535
}));
3636

37-
const renderResult = render(
37+
render(
3838
<FullWindowOverlay>
3939
<ChildComponent />
4040
</FullWindowOverlay>,
4141
);
42-
expect(renderResult.queryByTestId('FullWindowOverlay')).toBeNull();
43-
expect(renderResult.queryByTestId('text')).not.toBeNull();
44-
expect(renderResult).toMatchSnapshot();
42+
expect(screen.queryByTestId('FullWindowOverlay')).toBeNull();
43+
expect(screen.queryByTestId('text')).not.toBeNull();
44+
expect(screen).toMatchSnapshot();
4545
});
4646
});

‎example-app/SantokuApp/src/components/overlay/OverlayBackdrop.test.tsx

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {fireEvent, render} from '@testing-library/react-native';
1+
import {fireEvent, render, screen} from '@testing-library/react-native';
22
import React from 'react';
33
import {PressableProps, ViewProps} from 'react-native';
44
import Reanimated, {ZoomIn, ZoomOut} from 'react-native-reanimated';
@@ -32,35 +32,35 @@ const Wrapper: React.FC = ({children}) => {
3232

3333
describe('OverlayBackdrop only with required props', () => {
3434
it('returns null if not visible', () => {
35-
const sut = render(<OverlayBackdrop isVisible={false} />, {wrapper: Wrapper});
35+
render(<OverlayBackdrop isVisible={false} />, {wrapper: Wrapper});
3636
// OverlayBackdropがnullを返していることを確認したいがうまくやる方法が見当たらないので`toJSON`でnullになることを確認する。
37-
expect(sut.toJSON()).toBeNull();
37+
expect(screen.toJSON()).toBeNull();
3838
});
3939

4040
it('renders successfully only with required props', () => {
41-
const sut = render(<OverlayBackdrop isVisible testID="backdropAnimated" />, {wrapper: Wrapper});
42-
const animatedView = sut.getByTestId('backdropAnimated');
41+
render(<OverlayBackdrop isVisible testID="backdropAnimated" />, {wrapper: Wrapper});
42+
const animatedView = screen.getByTestId('backdropAnimated');
4343
const animatedViewProps = animatedView.props as Reanimated.AnimateProps<ViewProps>;
4444
// Animated.Viewのentering/exitingをテストで実行することができなかったため、entering/exitingにデフォルトアニメーションが設定されていることのみを確認する。
45-
expect(sut).toMatchSnapshot('AnimatedView with visible.');
45+
expect(screen).toMatchSnapshot('AnimatedView with visible.');
4646
expect(animatedView).not.toBeNull();
4747
expect(animatedViewProps.entering).toBe(OVERLAY_BACKDROP_DEFAULT_ENTERING);
4848
expect(animatedViewProps.exiting).toBe(OVERLAY_BACKDROP_DEFAULT_EXITING);
4949

5050
//////////////////////////////////////////////////////////////////////////////////
5151
// 非表示にする
5252
//////////////////////////////////////////////////////////////////////////////////
53-
sut.update(<OverlayBackdrop isVisible={false} />);
54-
const animatedView2 = sut.queryByTestId('backdropAnimated');
55-
expect(sut).toMatchSnapshot('AnimatedView with invisible.');
53+
screen.update(<OverlayBackdrop isVisible={false} />);
54+
const animatedView2 = screen.queryByTestId('backdropAnimated');
55+
expect(screen).toMatchSnapshot('AnimatedView with invisible.');
5656
expect(animatedView2).toBeNull();
5757
});
5858
});
5959

6060
describe('OverlayBackdrop with `onPress', () => {
6161
it('should be called on pressed', () => {
6262
const onPress = jest.fn();
63-
const sut = render(
63+
render(
6464
<OverlayBackdrop
6565
isVisible
6666
onPress={onPress}
@@ -70,7 +70,7 @@ describe('OverlayBackdrop with `onPress', () => {
7070
/>,
7171
{wrapper: Wrapper},
7272
);
73-
fireEvent.press(sut.getByTestId('pressable'));
73+
fireEvent.press(screen.getByTestId('pressable'));
7474
expect(onPress).toHaveBeenCalledTimes(1);
7575
});
7676
});
@@ -88,7 +88,7 @@ describe('OverlayBackdrop with all props', () => {
8888
*
8989
* animatedPropsは取得できなかったため（Snapshot上にも存在していない）、検証できていません
9090
*/
91-
const sut = render(
91+
render(
9292
<OverlayBackdrop
9393
isVisible
9494
testID="animatedView"
@@ -102,10 +102,10 @@ describe('OverlayBackdrop with all props', () => {
102102
/>,
103103
{wrapper: Wrapper},
104104
);
105-
expect(sut).toMatchSnapshot('OverlayBackdrop with all props.');
106-
const modal = sut.getByTestId('modal');
107-
const pressable = sut.getByTestId('pressable');
108-
const animatedView = sut.getByTestId('animatedView');
105+
expect(screen).toMatchSnapshot('OverlayBackdrop with all props.');
106+
const modal = screen.getByTestId('modal');
107+
const pressable = screen.getByTestId('pressable');
108+
const animatedView = screen.getByTestId('animatedView');
109109

110110
// assert modal
111111
const modalProps = modal.props as ViewProps;

‎example-app/SantokuApp/src/components/overlay/OverlayContainer.test.tsx

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {render} from '@testing-library/react-native';
1+
import {render, screen} from '@testing-library/react-native';
22
import React from 'react';
33
import {ViewProps} from 'react-native';
44
import Reanimated, {ZoomIn, ZoomOut} from 'react-native-reanimated';
@@ -22,27 +22,27 @@ jest.runAllTimers();
2222

2323
describe('OverlayContainer only with required props', () => {
2424
it('returns null if not visible', () => {
25-
const sut = render(<OverlayContainer isVisible={false} />);
25+
render(<OverlayContainer isVisible={false} />);
2626
// OverlayContainerがnullを返していることを確認したいがうまくやる方法が見当たらないので`toJSON`でnullになることを確認する。
27-
expect(sut.toJSON()).toBeNull();
27+
expect(screen.toJSON()).toBeNull();
2828
});
2929

3030
it('renders successfully only with required props', () => {
31-
const sut = render(<OverlayContainer isVisible testID="containerAnimated" />);
32-
const animatedView = sut.getByTestId('containerAnimated');
31+
render(<OverlayContainer isVisible testID="containerAnimated" />);
32+
const animatedView = screen.getByTestId('containerAnimated');
3333
const animatedViewProps = animatedView.props as Reanimated.AnimateProps<ViewProps>;
3434
// Animated.Viewのentering/exitingをテストで実行することができなかったため、entering/exitingにデフォルトアニメーションが設定されていることのみを確認する。
35-
expect(sut).toMatchSnapshot('AnimatedView with visible.');
35+
expect(screen).toMatchSnapshot('AnimatedView with visible.');
3636
expect(animatedView).not.toBeNull();
3737
expect(animatedViewProps.entering).toBe(MODAL_CONTAINER_DEFAULT_ENTERING);
3838
expect(animatedViewProps.exiting).toBe(MODAL_CONTAINER_DEFAULT_EXITING);
3939

4040
//////////////////////////////////////////////////////////////////////////////////
4141
// 非表示にする
4242
//////////////////////////////////////////////////////////////////////////////////
43-
sut.update(<OverlayContainer isVisible={false} />);
44-
const animatedView2 = sut.queryByTestId('containerAnimated');
45-
expect(sut).toMatchSnapshot('AnimatedView with invisible.');
43+
screen.update(<OverlayContainer isVisible={false} />);
44+
const animatedView2 = screen.queryByTestId('containerAnimated');
45+
expect(screen).toMatchSnapshot('AnimatedView with invisible.');
4646
expect(animatedView2).toBeNull();
4747
});
4848
});
@@ -58,7 +58,7 @@ describe('OverlayContainer with all props', () => {
5858
*
5959
* animatedPropsは取得できなかったため（Snapshot上にも存在していない）、検証できていません
6060
*/
61-
const sut = render(
61+
render(
6262
<OverlayContainer
6363
isVisible
6464
testID="animatedView"
@@ -68,8 +68,8 @@ describe('OverlayContainer with all props', () => {
6868
exiting={exiting}
6969
/>,
7070
);
71-
expect(sut).toMatchSnapshot('OverlayContainer with all props.');
72-
const animatedView = sut.getByTestId('animatedView');
71+
expect(screen).toMatchSnapshot('OverlayContainer with all props.');
72+
const animatedView = screen.getByTestId('animatedView');
7373

7474
// assert animatedView
7575
const animatedViewProps = animatedView.props as Reanimated.AnimateProps<ViewProps>;

‎example-app/SantokuApp/src/components/overlay/loading/Overlay.test.tsx

+14-16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {act} from '@testing-library/react-hooks';
2-
import {render} from '@testing-library/react-native';
2+
import {render, screen} from '@testing-library/react-native';
33
import React from 'react';
44
import {Text, ViewStyle} from 'react-native';
55
import {ReactTestInstance} from 'react-test-renderer';
@@ -20,28 +20,26 @@ const FADE_DURATION = 200;
2020

2121
describe('Overlay', () => {
2222
it('Overlayが正常にrenderできることを確認', () => {
23-
const renderResult = render(
23+
render(
2424
<Overlay visible>
2525
<ChildComponent />
2626
</Overlay>,
2727
);
2828

29-
const {queryByTestId, queryByText, getByTestId} = renderResult;
29+
expect(screen.queryByTestId('text')).not.toBeNull();
30+
expect(screen.queryByText('test')).not.toBeNull();
3031

31-
expect(queryByTestId('text')).not.toBeNull();
32-
expect(queryByText('test')).not.toBeNull();
33-
34-
expect(getStyle<ViewStyle>(getByTestId('overlayAnimatedView')).opacity).toBe(0);
35-
expect(renderResult).toMatchSnapshot('render直後');
32+
expect(getStyle<ViewStyle>(screen.getByTestId('overlayAnimatedView')).opacity).toBe(0);
33+
expect(screen).toMatchSnapshot('render直後');
3634

3735
act(() => {
3836
jest.advanceTimersByTime(FADE_DURATION);
3937
});
4038

41-
expect(getStyle<ViewStyle>(getByTestId('overlayAnimatedView')).opacity).toBe(1);
42-
expect(renderResult).toMatchSnapshot('フェードイン後');
39+
expect(getStyle<ViewStyle>(screen.getByTestId('overlayAnimatedView')).opacity).toBe(1);
40+
expect(screen).toMatchSnapshot('フェードイン後');
4341

44-
renderResult.rerender(
42+
screen.rerender(
4543
<Overlay visible={false}>
4644
<ChildComponent />
4745
</Overlay>,
@@ -51,14 +49,14 @@ describe('Overlay', () => {
5149
jest.advanceTimersByTime(FADE_DURATION);
5250
});
5351

54-
expect(queryByTestId('overlayAnimatedView')).toBeNull();
55-
expect(renderResult).toMatchSnapshot('フェードアウト後');
52+
expect(screen.queryByTestId('overlayAnimatedView')).toBeNull();
53+
expect(screen).toMatchSnapshot('フェードアウト後');
5654
});
5755

5856
it('Overlayに指定したpropsがrenderに反映されていることを確認', () => {
5957
const onHideEnd = jest.fn();
6058
// fadeDurationはテストコードでアニメーション時間を調整できないため検証対象外
61-
const {queryByText, getByTestId} = render(
59+
render(
6260
<Overlay visible onHideEnd={onHideEnd} style={{backgroundColor: 'red'}}>
6361
<ChildComponent />
6462
</Overlay>,
@@ -68,7 +66,7 @@ describe('Overlay', () => {
6866
jest.advanceTimersByTime(FADE_DURATION);
6967
});
7068

71-
expect(queryByText('test')).not.toBeNull();
72-
expect(getStyle<ViewStyle>(getByTestId('overlayAnimatedView')).backgroundColor).toBe('red');
69+
expect(screen.queryByText('test')).not.toBeNull();
70+
expect(getStyle<ViewStyle>(screen.getByTestId('overlayAnimatedView')).backgroundColor).toBe('red');
7371
});
7472
});

0 commit comments

Comments
 (0)