[[oktatas:telefon:react_native|< React Native]]
====== React Native - Tesztelés ======
* **Szerző:** Sallai András
* Copyright (c) Sallai András, 2023
* Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
* Web: https://szit.hu
===== 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:
* 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
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:
"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:
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 (
Háromszög
setBase(text)}
testID="base"
/>
setHeihgt(text)}
testID="height"
/>
{area}
);
}
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 ====
import {render, screen, fireEvent} from '@testing-library/react-native'
import App from '../App'
describe('Triangle tesztelése', () => {
beforeEach(() => {
render()
})
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 ====
* https://reactnative.dev/docs/testing-overview (2023)
* https://jestjs.io/docs/tutorial-react-native (2023)