Jestのサンプルを作ってみた

import React from 'react';
import { View, Text } from 'react-native';
import CustomComponent from './CustomComponent';
import DataComponent from './DataComponent';

const App: React.FC = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <CustomComponent title="Hello">
      <Text>Welcome to React Native!</Text>
    </CustomComponent>
    <DataComponent />
  </View>
);

export default App;

import React, { ReactNode } from 'react';
import { View, Text, StyleSheet } from 'react-native';

interface CustomComponentProps {
  title: string;
  children: ReactNode;
}

const CustomComponent: React.FC = ({ title, children }) => (
  <View style={styles.container}>
    <Text style={styles.title}>{title}</Text>
    {children}
  </View>
);

export default CustomComponent;

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f0f0f0',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

import React from 'react';
import {Text } from 'react-native'
import { render,screen } from '@testing-library/react-native';
import CustomComponent from './CustomComponent';
import '@testing-library/jest-dom'

describe('CustomComponent', () => {
  it('テキストが表示されているかどうかを確認する', () => {
    render(
      <CustomComponent title="Test Title">
        <Text>Test Children</Text>
      </CustomComponent>
    );
    expect(screen.getByText('Test Title')).toBeTruthy();
    expect(screen.getByText('Test Children')).toBeTruthy();
  });

  it('styleが正しく設定されていること', () => {
    const { getByText } = render(<CustomComponent title="Test" />);
    const textElement = getByText('Test');
    const styles = textElement.props.style;
    // スタイルプロパティの検証
    expect(styles.fontSize).toBe(20);
    expect(styles.fontWeight).toBe('bold')
  });
});

import SVGimage from './path/to/SVGimage.svg';
import SVGimage2 from './path/to/SVGimage2.svg';

const svg = (id) => {
  switch(id) {
    case 'svgsample1':
      return <svgimage width="100" height="100" viewport="{10,10,10,10}" data-testid="svg-size1"/>;
    case 'svgsample2':
      return <svgimage width="200" height="200" viewport="{20,20,20,20}" data-testid="svg-size2"/>;
    case 'svgsample3':
      return <svgimage2 width="300" height="300" viewport="{30,30,30,30}" data-testid="svg-size3"/>;
    // 他のケース...
  }
};

import React from 'react'; 
import { View, Text } from 'react-native'; 

const SvgMock = ({ width, height, viewport, ...props }) => { 
    return ( 
        <View {...props} testID={props.testID}> 
             <Text testID="mock-svg-width">{width}</Text> 
             <Text testID="mock-svg-height">{height}</Text> 
             <Text testID="mock-svg-viewport">{viewport}</Text> 
        </View> 
    ); 
};

import { render, screen } from '@testing-library/react-native';
import svg from './src/svg';
describe('svg function', () => {
  it('renders correct SVG for svgsample1', () => {
    render(<Svg id="svgsample1" />); 
    const svgComponent = screen.getByTestId('svg-size1'); 
　　 expect(svgComponent).toBeTruthy();
 　　const width = screen.getByTestId('mock-svg-width'); 
    const height = screen.getByTestId('mock-svg-height'); 
    const viewport = screen.getByTestId('mock-svg-viewport'); 
    expect(width.props.children).toBe('100'); 
    expect(height.props.children).toBe('100'); 
    expect(viewport.props.children).toBe('10,10,10,10'); 
  });

  it('case svgsample2', () => {
    render(<Svg id="svgsample2" />); 
    const svgComponent = screen.getByTestId('svg-size2'); 
　　 expect(svgComponent).toBeTruthy();
 　　const width2 = screen.getByTestId('mock-svg-width'); 
    const height2 = screen.getByTestId('mock-svg-height'); 
    const viewport2 = screen.getByTestId('mock-svg-viewport'); 
    expect(width2.props.children).toBe('200'); 
    expect(height2.props.children).toBe('200'); 
    expect(viewport2.props.children).toBe('20,20,20,20'); 
  });

  it('case svgsample3', () => {
    render(<Svg id="svgsample3" />); 
    const svgComponent = screen.getByTestId('svg-size3'); 
　　 expect(svgComponent).toBeTruthy();
 　　const width = screen.getByTestId('mock-svg-width'); 
    const height = screen.getByTestId('mock-svg-height'); 
    const viewport = screen.getByTestId('mock-svg-viewport'); 
    expect(width.props.children).toBe('300'); 
    expect(height.props.children).toBe('300'); 
    expect(viewport.props.children).toBe('30,30,30,30'); 
  });

  // 他のケースに対するテスト...
});