Standart knowledge of automation testing. Jest, Enzyme, and Husky simple configuration. Example of use case snapshot testing, component testing, and library default behavior.

1. HELLO, IAM RIZSKY
REACT NATIVE TEST WITH JEST
MUHAMMAD RIZSKY
GITHUB.COM/RIZSKY
@MRIZSKY

2. REACT NATIVE TESTING WITH JEST
OUTLINE
▸ 1. Test Principles
▸ 2. Unit Testing
▸ a. Jest and Enzyme
▸ b. Snapshot Testing
▸ c. Function in component Testing
▸ d. Functional Testing
▸ 4. Working with git? Use husky! And lint staged
▸ 5. Conclusion, taglines, and quote
▸ 6. Any Question?

3. REACT NATIVE TESTING WITH JEST
MOST FAMOUS AUTOMATION TEST CONCEPT
Test Pyramid by Mike Cohn

4. REACT NATIVE TESTING WITH JEST
F.I.R.S.T PRINCIPLES
Fast
Isolated/Independent (Arrange Act Assert (AAA))
Repeatable
Self-validating
thorough

5. REACT NATIVE TESTING WITH JEST
ENZYME AND JEST SETUP
Example of Jest Test coverage
Quick Installation Prequisite *npm
npm i — save-dev enzyme enzyme-adapter-react-16 react-dom
npm I -save-dev jest-enzyme

6. REACT NATIVE TESTING WITH JEST
JEST & ENZYME CONFIGURATION
Package.json Tests/Setup.js
https://jestjs.io/docs/en/configuration.html
More detail on :

7. REACT NATIVE TESTING WITH JEST
SNAPSHOT TESTING
//common spec for snapshot test
Import component
wrapper = shallow(component)
expect(wrapper).toMatchSnapshot()

8. REACT NATIVE TESTING WITH JEST
SNAPSHOT TESTING
Way to mocking with Jest
Jest.mock() - mocking modules
Jest.fn() - mocking function

9. REACT NATIVE TESTING WITH JEST
FUNCTION IN COMPONENT TESTING
//Common Case Flow on Profile.test.js with (function component)
Import enzyme
Import component
navigate = {navigate : jest.fn((route)=>{
route})}
onPress = ()=>{navigate(‘home’)}
wrapper = shallow(<component navigation={navigate} onPressThis={onPress}/>)
describe(‘test the function’)
beforeEach(‘clearing mock data’)
navigate.mockClear()

10. REACT NATIVE TESTING WITH JEST
FUNCTION IN COMPONENT TESTING
it(‘positive’)
wrapper
.find(‘touchOpacity’)
.props()
.onpress()
expect(navigate).toHaveBeenCalled()
expect(navigate).toHaveBeenCalledTimes(1)
it(‘positive’)
wrapper
.find(‘touchOpacity’)
.props()
.onpress()
expect(navigate).not.toHaveBeenCalled()

11. REACT NATIVE TESTING WITH JEST
FUNCTION IN COMPONENT TESTING
//Common Case Flow on dashboard.test.js with (class component)
Import enzyme
Import component
result = {result: ‘testing’}
testDataPositive = ‘positif’
testDataNegative = ‘negative’
wrapper = shallow(<component props={onPress}/>)
describe(‘test the function’)
Instance = wrapper.instance()
it(‘positive’)
instance.handleChangeData(testdataPositive)
Expect(instance.state()data).to.equal(result)
it(‘negative')
instance.handleChangeData(testDataNegative)
Expect(instance.state()data).to.equal(result)

12. REACT NATIVE TESTING WITH JEST
FUNCTIONAL TESTING

13. REACT NATIVE TESTING WITH JEST
WORKING WITH GIT? USE HUSKY!
//Package.json
…
"husky": {
"hooks": {
"pre-commit": "npm run test
}
…
Example how it works

14. “QUALITY IS NEVER AN ACCIDENT; IT IS ALWAYS THE
RESULT OF INTELLIGENT EFFORT.” – JOHN RUSKIN
QUOTE’S
MUHAMMAD RIZSKY
GITHUB.COM/RIZSKY
@MRIZSKY