• Szerző: Sallai András
• Copyright © Sallai András, 2023
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

Ebben a leírásban React Native alkalmazás tesztelését tekintjük át. Jest és React Native Testing Library-t használjuk.

Eszközök:

• https://jestjs.io/ (2023)
  • https://jestjs.io/docs/tutorial-react-native (2023)
• https://callstack.github.io/react-native-testing-library/ (2023)
  • https://callstack.github.io/react-native-testing-library/docs/api (2023)
  • https://www.npmjs.com/package/@testing-library/react-native (2023)

Triangle példakód:

• https://github.com/oktat/mobil_triangle_test.git

yarn add --dev @testing-library/react-native
yarn add --dev react-router-dom
yarn add --dev react-test-renderer
yarn add --dev jest

Egészítsük ki a package.json fájlt:

package.json

  "scripts": {
    "test": "jest"
  },
  "jest": {
    "preset": "react-native"
  },

Az alkalmazást kiegészítjük tesztelésre szánt azonosítókkal, testID attribútumokka. Például:

<TextInput testID="base" />

App.js

import { 
  StyleSheet, 
  Text, 
  View, 
  TextInput, 
  Button
} from 'react-native';
import {useState} from 'react';
 
export default function App() {
 
  const [base, setBase] = useState(0);
  const [height, setHeihgt] = useState(0);
  const [area, setArea] = useState(0);
 
  function calcArea(base, height) {
    return base * height / 2;
  }
 
  function startCalc() {
    let res = calcArea(base, height)
    setArea(res)
  }
 
  return (
    <View style={styles.container}>
      <Text style={styles.elso} testID="title">Háromszög</Text>
 
      <TextInput style={styles.input}      
      onChangeText={text => setBase(text)}
      testID="base"
      />
      <TextInput style={styles.input}      
      onChangeText={text => setHeihgt(text)}
      testID="height"
      />
 
      <Button title='Számol' 
      onPress={startCalc} 
      testID="calcButton"
      />
 
      <TextInput 
      style={styles.input}      
      value={area}
      testID="area"
      />
 
      <Text style={styles.elso}>
        {area}
      </Text>
 
      <Button title="Nulla" onPress={ () => {
        setBase(0)
        setHeihgt(0)
        setArea(0)        
      }} />
    </View>
 
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#008',
    alignItems: 'center',
    justifyContent: 'center',    
  },
  elso: {
    color: '#fff',
    fontSize: 30,
  },
  input: {
    backgroundColor: 'lightblue',
    width: '90%',
    fontSize: 30,
  },
});

__test__/AppTest.js

import {render, screen, fireEvent} from '@testing-library/react-native'
import App from '../App'
 
describe('Triangle tesztelése', () => {
  beforeEach(() => {
    render(<App />)
  })
 
  it('Cím tesztelése', async () => {
      const title = screen.getByTestId('title').props.children
      expect(title).toMatch(/Háromszög/)
  })
 
  it('Bemenet 30, 35-re elvárt 525', async () => {
    fireEvent.changeText(screen.getByTestId('base'), 30)
    fireEvent.changeText(screen.getByTestId('height'), 35)
    fireEvent.press(screen.getByTestId('calcButton'))
    const area = await screen.getByTestId('area').props.value
    expect(area).toEqual(525)
  })
 
});

• https://reactnative.dev/docs/testing-overview (2023)
• https://jestjs.io/docs/tutorial-react-native (2023)