Tartalomjegyzék

< React Native

React Native - Tesztelés

Bevezetés

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:

Triangle példakód:

A függőségek pnpm paranccsal való kezelése hibákhoz vezethet.

Háromszög területszámítás

Függőségek

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

Script

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

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

Alkalmazás

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,
  },
});

Teszt

__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)
  })
 
});

Linkek