Przyspiesz testowanie React Native ze snap-it

Pisanie testów to często uciążliwa praca

Zawsze wymaga napisania dużej ilości boilerplatu zanim przejdziemy do normalnej pracy. Najbardziej mnie męczy mnie tworzenie snapshotów.

Zalety snapshotów

Wypiszę tylko takie, które poznałem z doświadczenia:

• widzisz jak zmienia się zachowanie komponentu - łatwo dodać coś do funkcji która renderuje kawałek kodu i sprawdzić w aplikacji że wygląda dobrze, ale w testach potrafi wyjść kiedy coś się źle wyrenderuje
• robisz duży refactor, zmieniasz jak działają funkcje - snapshot utrzyma Cię w pewności że komponent będzie wyglądał tak samo
• nie masz typowania w kodzie - snapshot pomoże Ci utrzymać pewność że nie przechodzą jakieś dziwne wartości, które mogą popsuć działanie aplikacji

Ale...

Musisz dobrze te testy napisać, sprawdzić wiele przypadków i upewnić się że mają sens, a nie są testami dla testów.

Jak przyspieszyć pracę?

Stworzyłem proste narzędzie do ogarnięcia całego początkowego testowania komponentu.

Z takiego kodu:

// example/Search.tsx
import React from 'react'
import { View } from 'react-native'
interface Props {
  text: string;
}
export default function Search({}: Props) {
  return <View />
}

Wygeneruje nam taki test:

import React from 'react'
import { render } from 'react-native-testing-library'
import { Search } from '../example/Search.tsx'
describe('Search', () => {
  test('Snaphot for required props', () => {
    const props = {
      text: 'testing string',
    }
    const tree = render(<Search {...props} />).toJSON()
    expect(tree).toMatchSnapshot()
  })
})

Idealnie na początek, mamy punkt wyjścia do dalszego testowania kodu. Możemy je rozszerzać lub dopisywać nowe. Nie musimy już za każdym razem pisać tych wszystkich importów i describów.

Wykorzystaj snap-it i generuj automatycznie wszystkie możliwe przypadki na podstawie propsów

Wystarczy użyć narzędzie, które napisałem aby przyspieszyć swoją pracę i poprawić mój "developer experience":

https://github.com/Patys/snap-it

W momencie pisania tego postu, generuje tylko podstawowe przypadki oraz działa wyłącznie z TypeScript. Ciągle dopisuję kolejne możliwości i usprawniam działanie skryptu.

Pisz testy odpowiedzialnie

To nie ma zastąpić Twojej pracy, ma tylko usprawnić ją poprzez szybszy start. Nie zastępuje pisania testów. Musisz zawsze dopasować wygenerowany kod do konkretnego przypadku.