React-native for testing by testing-library (part 1)

// App.js
import React from "react";
import { View, Text } from "react-native";
import User from "./src/User";

const App = () => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>아래에 컴포넌트가 들어갑니다.</Text>
      <User name={"악당별"} id={"a9603"} />
    </View>
  );
};

export default App;

// User.js

import React, { useState } from "react";
import { View, Text } from "react-native";
import CustomButton from "./CustomButton.js";

const User = ({ name, id }) => {
  const [msg, setMsg] = useState("Who a u?");

  return (
    <View>
      <Text>메시지가 표시 됩니다. : {msg}</Text>
      <Text>아이디가 표시 됩니다 : {id}</Text>
      <Text>이름이 표시 됩니다 : {name}</Text>
      <CustomButton
        label="버튼입니다."
        onPress={() => setMsg("버튼을 눌렀습니다.")}
      />
    </View>
  );
};

export default User;

// CustomButton.js

import React from "react";
import { Button } from "react-native";

const CustomButton = ({ label, onPress }) => {
  return <Button title={label} onPress={onPress} />;
};

export default CustomButton;

import "react-native";
import React from "react";
import App from "../App";

// remove origin codes
// Note: test renderer must be required after react-native.
// import renderer from 'react-test-renderer';

// it('renders correctly', () => {
//   renderer.create(<App />);
// });

// added codes
import { render } from "@testing-library/react-native";
let props;
let component;

function getComponent(props) {
  return <App {...props} />;
}

describe("App test...", () => {
  props = {};
  component = getComponent(props);
  test("test 1", () => {
    const rendering = render(component);
    expect(rendering).toMatchSnapshot();
    expect(rendering).toBeTruthy();
  });
});

expect(rendering).toMatchSnapshot();

expect(rendering).toBeTruthy();

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`App test... test 1 1`] = `
<View
  style={
    Object {
      "alignItems": "center",
      "flex": 1,
      "justifyContent": "center",
    }
  }
>
  <Text>
    아래에 컴포넌트가 들어갑니다.
  </Text>
  <View>
    <Text>
      메시지가 표시 됩니다. :
      Who a u?
    </Text>
    <Text>
      아이디가 표시 됩니다 :
      a9603
    </Text>
    <Text>
      이름이 표시 됩니다 :
      악당별
    </Text>
    <View
      accessibilityRole="button"
      accessible={true}
      collapsable={false}
      focusable={true}
      nativeID="animatedComponent"
      onClick={[Function]}
      onResponderGrant={[Function]}
      onResponderMove={[Function]}
      onResponderRelease={[Function]}
      onResponderTerminate={[Function]}
      onResponderTerminationRequest={[Function]}
      onStartShouldSetResponder={[Function]}
      style={
        Object {
          "opacity": 1,
        }
      }
    >
      <View
        style={
          Array [
            Object {},
          ]
        }
      >
        <Text
          style={
            Array [
              Object {
                "color": "#007AFF",
                "fontSize": 18,
                "margin": 8,
                "textAlign": "center",
              },
            ]
          }
        >
          버튼입니다.
        </Text>
      </View>
    </View>
  </View>
</View>
`;

// CustomButton-test.js

import React from "react";
import { render, fireEvent } from "@testing-library/react-native";
import CustomButton from "../src/CustomButton";

describe("Custom Button test", () => {
  const onPressMockup = jest.fn();
  const props = {
    label: "라벨입니다.",
    onPress: onPressMockup,
  };

  test("onPress test", () => {
    const rendering = render(<CustomButton {...props} />);
    var TEST_COUNT = 100;
    for (let i = 0; i < TEST_COUNT; i++) {
      fireEvent.press(rendering.getByText("라벨입니다."));
    }
    expect(onPressMockup).toBeCalledTimes(TEST_COUNT);
  });
});

const props = {
  label: "라벨입니다.",
  onPress: onPressMockup,
};

const props = {
  label: "라벨입니다.",
  // onPress: onPressMockup,
};