ReactNative и что-то остальное – Telegram
ReactNative и что-то остальное
160 subscribers
80 photos
6 videos
2 files
104 links
если тебе не больно, значит ты что-то делаешь не правильно

что-то о React Native и в целом о разработке

буду рад подпискам и донатам
https://boosty.to/mbhusty
https://www.patreon.com/mbhusty

Лс: @mbhusty
Download Telegram
Всем привет!

Сегодня поговорим про unit-тесты и интеграционные тесты в RN.

Я решил для начала пройтись по тому что существует в этой теме, а потом во что-то конкретное можно и углубиться 🤔

Итак, погнали чуть по теории

Unit-тесты vs интеграционные тесты

Unit-тесты: проверяем работу отдельных функций или компонентов в изоляции.

Пример: кнопка вызывает нужный callback??

Интеграционные тесты: проверяем взаимодействие частей приложения.

Пример: нажатие на кнопку отправляет форму.

Что можем использовать для тестирования функционала?
Jest/RTL/Detox

1. Jest
Jest — стандартный инструмент для unit-тестов в React Native. Быстрый, простой в настройке и с богатым функционалом.

Как настроить:
Jest идет по умолчанию в новых проектах React Native. Достаточно добавить тесты в папку
__tests__


Пример теста:


import { sum } from './utils';

test('sum adds numbers correctly', () => {
expect(sum(1, 2)).toBe(3);
});



Запуск тестов:


npm test
# или
yarn test


Jest автоматически найдет тесты и запустит их.
После выполнения тестов увидим сводку с результатами:


PASS __tests__/example.test.js
✓ sum adds numbers correctly (3ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.543s



2. React Testing Library (RTL)
Этот инструмент позволяет тестировать React-компоненты так, как их видит пользователь.

Установите библиотеку:


npm install --save-dev @testing-library/react-native


Пример теста:


import { render, fireEvent } from '@testing-library/react-native';
import MyButton from './MyButton';

test('button triggers callback on press', () => {
const onPressMock = jest.fn();
const { getByText } = render(<MyButton onPress={onPressMock} noscript="Click me" />);

fireEvent.press(getByText('Click me'));
expect(onPressMock).toHaveBeenCalledTimes(1);
});


Запуск тестов:


npm test


а если нам надо запустить какой-то конкретный тест, то добавляем .only


test.only('кнопка вызывает onPress', () => {
expect(true).toBe(true);
});


3. Detox
Detox — это про интеграционные тесты. Он проверяет, как работает ваше приложение "целиком" на эмуляторе или реальном устройстве.

Как установить:


npm install -g detox-cli
npm install detox --save-dev


Пример теста:


describe('Login Flow', () => {
beforeAll(async () => {
await device.launchApp();
});

it('should log in successfully', async () => {
await element(by.id('username')).typeText('testuser');
await element(by.id('password')).typeText('password123');
await element(by.id('loginButton')).tap();
await expect(element(by.id('welcomeMessage'))).toBeVisible();
});
});


Запуск всех тестов:


detox test


Если нужно запустить отдельно на ios/android


detox test -c ios.sim.debug
detox test -c android.emu.debug



//или запуск конкретного теста
detox test e2e/login.test.js


Результат:


detox[42012] INFO: [test.js] Running tests...
detox[42012] INFO: Login Flow
detox[42012] INFO: ✓ should log in successfully(1.2s)
detox[42012] INFO: Tests successful!



По верхам прошлись, теперь давайте выбререм какой из инструментов будем ковырять:

Jest - 👍 | RTL - ⚡️| Detox - 👋

Или свое в комменты 👇


⚡️ReactNative и что-то остальное
Please open Telegram to view this post
VIEW IN TELEGRAM
19🔥4
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6
Forwarded from React Native World
🦄 Вышел Unistyles 3.0 и это новое слово в стилизации для React Native

Используя преимущества новой архитектуры, такие как интеграция с Fabric и взаимодействие с Shadow Tree, разработчики смогли перенести большую часть работы со стилями на сторону C++ и избежать ре-рендеров, а также дополнительных обёрток компонентов на стороне JS.

Как это работает?

Вместо того чтобы вычислять стили в рантайме и применять их через ре-рендер компонента с новым объектом стиля, Unistyles использует совершенно иной подход:

1️⃣ Babel-плагин анализирует стили на этапе сборки и конвертирует код в формат, подходящий для работы с ShadowNode. Примеры трансформаций можно найти в документации.

2️⃣ На основе анализа генерируются:

— C++ представление стилей (StyleSheetRegistry),
— биндинги для View (ShadowRegistry), к которым эти стили применяются.

Внутри приложения вы всё так же работаете с объектом StyleSheet как с обычным JS-объектом. Но магия начинается, когда стили нужно изменить!

Что происходит при изменении стилей?

Например, при:
— нажатии на кнопку которая вызывает изменения стиля,
— переключении в dark mode,
— обновлении настроек Accessibility.

Unistyles поддерживает 14 различных событий, которые вызывают обновление стилей. После получения события библиотека вычисляет новое состояние стилей и, благодаря ShadowRegistry, применяет их напрямую на нативной стороне, без ре-рендеров.

Полный список всех новых функций можно посмотреть на официальном сайте.

* важно новый unistyles работает только на RN 0.76+ и только с новой архитектурой

@react_native_world
🔥7
и это не вопрос.
всех с пятницей, наконец 💀

#пятничный_мем

⚡️ReactNative и что-то остальное
Please open Telegram to view this post
VIEW IN TELEGRAM
💯4👾21
ХО-ХО-ХО 🎉
Привет, падпищеки! Хотел сказать спасибо всем кто был тут со мной в этом году, вы супер!

За этот год много чего сделали, много чего поковыряли и много в чем разобрались. Хотел в эти дни добить материал по тестированию, но понял что оно нахуй никому не нужно в конце года.

Так что вернусь в следующем!

Желаю вам всем заниматься тем, чем кайф, расти и развиваться. И не забывать отдыхать

А закинуть автору на мандаринки вы можете по этой ссылке или в закрепе канала 💅

Обнял, stay tuned in 2025 😘
Please open Telegram to view this post
VIEW IN TELEGRAM
17👍33🌭1
Всем привет!

Надеюсь у всех качественно прошли каникулы и вы набрались сил 🥲

Я наконец нашел время, что бы разобраться с React Testing Library (RTL) и подготовить материал.

Погнали!

В посте выше уже была информация про установку либы + пример. Так что мы пойдем сразу дальше.

Посте установки, попробовал запустить тесты и сразу же получил ошибку: Jest encountered an unexpected token

В доке ничего внятного не нашел, вроде бы все сделал, что необходимо. Пошел смотреть базовый пример в репозитории проекта.

Добавил необходимые конфиги по примеру, все взлетело. Теперь переходим к самим тестам//

У нас будет 3 примера:

1. Проверяем, что вызов функции onPress происходит при нажатии на кнопку.

2. Симулируем ввод текста в текстовое поле.

3. Проверяем успешную отрисовку данных после их загрузки.

После написания тестов, запускаем

yarn test/npm run test




> rtlexample@1.0.0 test
> jest

PASS components/__tests__/Button.test.tsx
PASS components/__tests__/InputField.test.tsx
PASS components/__tests__/PostList.test.tsx

Test Suites: 3 passed, 3 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 0.835 s, estimated 1 s
Ran all test suites.


Тесты пройдены – вы великолепны!

RTL работает поверх Jest, но отличие их в том, что в RTL основное внимание уделяется тестированию поведения приложения с точки зрения пользователя (клики, ввод текста и проверка визуального отображения)

Для этого нам упростили поиск элементов с помощью методов, основанных на доступности: getByText, getByRole, getByLabelText и т. д.

лайк, шер, репост + в карму 💜

⚡️ReactNative и что-то остальное
Please open Telegram to view this post
VIEW IN TELEGRAM
13🔥2👏1
Интересно бы было попробовать текстовое распознавание в React Native? 👍

Есть одна идея, хоть и не новая (тыц), но результат будет, кажется, довольно полезным и для процесса и по итогу.

Пишем аппку на RN под обе платформы, с помощью которой можно будет сканить чеки из заведений и делить их между людьми, сохранять историю, вносить данные вручную и тд.

Все довольно просто и понятно, кроме как раз самого распознавания. С ним то я и хочу поразбираться. Какие есть решения на данный момент и как они работают.

А если решения не подойдут, сделать свое с блэкджеком и.. MLKit

⚡️ReactNative и что-то остальное
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥8
Падпищеки, как дела с инетом? Живем или рабочий день можно заканчивать?
1🫡6👎1
yo!
сегодня ровно год с создания канала 🧐

всем спасибо, едем дальше 💙
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥163🍌1
👆👆👆

может бахнем стрим на выходных?

в онлайне попробуем начать делать проект по распознаванию чеков
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥13👨‍💻1
Немного оффтопа, но это были лучшие умные часы эвэр!

Рад что основатель Pebble даже спустя 10 лет не оставил эту идею и будет делать что-то новое + гугл уже опубликовали исходный код ос

мэйк пэббл грейт эгейн

https://repebble.com/
1👍3
This media is not supported in your browser
VIEW IN TELEGRAM
😁7👾2
привет, падпищеки!

немного отговорок апдейтов по каналу, стримам и проекту

🔘 канал жив, просто большой загруз по работе из-за которого нет времени на все остальное

🔘 сейчас активно готовлю апдейт приложения по F1 к началу нового сезона

🔘 стримы по проекту будут, жду новую железку, потому что текущая с трудом тянет все вместе (дада, час ждали пока запуститься эмулятор на тестовом стриме)

всех обнял, всем хорошей пятницы 😁
Please open Telegram to view this post
VIEW IN TELEGRAM
25
по распознаванию чеков будем пробовать завести вот это 👇

как раз Object Detection то что нам нужно

спасибо @kirilln0v за наводку
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥4