Jest. Unit Тестирование в JavaScript

Исходники тут: t.me/js_by_vladilen/135
Получить профессию Frontend разработчика -
bit.ly/3uc9JrT
Подробнее узнать об обучении в Result School -
bit.ly/3QUu9zq
Бесплатный курс HTML & CSS - bit.ly/3xUXCjW
Сделать 5 проектов на JavaScript - bit.ly/3y4y7go
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
Jest. Unit Тестирование в JavaScript
#javascript #jest

[@teosrevival]

0.1 + 0.2 !== 0.3 это следствие того как раз что JS вполне точно ведет себя с float'ами! и именно так ведет себя с ними процессор! Не знаю какие языки это автоматически пытаются исправить, потому что именно так корректно. Дело в том, что литералы 0.1 и 0.2 написанные в соурсе даже не попадают в таком виде в рантайм, еще на стадии компиляции ими инициализируются float переменные. И т.к. ни одно из этих чисел не имеет конечного представления в степени 2ки (это легко проверяется многократным умножением на 2 - дробная часть всегда остается, а значит и биты разрядов после запятой зациклены) из-за этого они не представимы точно и на самом деле вводя так float'ы вы на самом деле вводите 0.10000000000000001 + 0.20000000000000002 в итоге получается 0.30000000000000004 потому у 0.2 старший единичный бит несет =0.125, тогда как у 0.1 это =0.0625 и это означает, что у числа 0.20000000000000002 на самом деле нет возможности прибавить единичную долю в последний разряд. Т.к. на битовом уровне там не хватает значащих бит, из-за того что на один больше в старшем разряде задействовано) Потому при сложении таких чисел этот единичный разряд округляется в большую сторону по правилу ближайшего среднего (в двоичной системе 1 - это половинная граница, так же как и 5 в 10ой) В float'ах всегда такое происходит. И JS в этом не уникален. Напротив это четко соответствует стандарту. (Любой сишник вам скажет, что под float общепринято подразумевать DoublePrecission, если не указанно иное) Языки вроде Питона не имеют такой "ошибки" лишь потому что они реализуют вообще не DoublePrecission, там вообще длинная арифметика - но она не ускоряется процессором, потому считать на питоне дорого. (любая неаккуратная операция превращается во множество операций) - т.е. на более глубоком рассмотрении проясняется что если 0.1 + 0.2 не будет давать 0.30000000000000004 - Это ошибка. Вместо автоматического приведения точности в JS'е позаботились и из коробки дали методы .toFixed developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed .toPrecision developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision Если разобраться с ними станет ясно почему это нельзя делать автоматически без потерь точности. Потому что то хотите верьте хотите проверьте, из того что могут содержать в себе float'ы, вы на самом деле вводите это: 0.1.toPrecision(100) = 0.1000000000000000055511151231257827021181583404541015625 0.2.toPrecision(100) = 0.200000000000000011102230246251565404236316680908203125 Простое решение использовать конструкцию: +(a+b).toPrecision(15) при каждом переводе числа в 10ую систему !!! которое конечно происходит когда вы преобразуете его в строку !!! Без претензий к Владилену. Пояснение этих фактов бы точно сбило с толку всех осваивающих сабж Юнит Тест. Потому видео курс снимает он, а я пишу этот комментарий, так сказать факультативная инфо =)

[@teosrevival]

Раз уж подняли в топ, порылся еще: Как вы понимаете, если ошибку округления повторить в цикле миллион раз, то в худшем случае она будет в миллион раз больше, т.е. применительно к данному примеру останется 5 символов после запятой... (на практике отклонение нормально распределено, но нам однажды осваивать космос) Потому есть лекарство. Алгоритм Кэхэна (компенсационное суммирование) исправляющий ошибку округления при многократном сложении. Он оригинален тем, что для компенсирования ошибки округления он использует ее саму! Обычно такое пригождается на сях, но я переделал в однострочный хелпер на JS /** @return [коррекция, сумма]:number[] - двусоставный float * @param прибавляемое:number - маленькое float (что может потеряться при сумме) * @param [коррекция, сумма]:number[] - двусоставный float */ var kahanSum=(add,[surplus,sum])=>[-sum+(sum+=add-=surplus)-add,sum] //test('Cложение Number.MAX_SAFE_INTEGER миллион раз с одной миллионной долей', () => { let surplus_sum = [0,Number.MAX_SAFE_INTEGER]; for(let n = 1000000; n--;) surplus_sum = kahanSum(0.000001, surplus_sum); console.log( surplus_sum = kahanSum(-Number.MAX_SAFE_INTEGER, surplus_sum) ) // expect(surplus_sum.pop()).toBe(1); // разность должна составить 1 т.к. миллион * милионных долей это = 1 // несмотря на то что даже +0.1 не может сохраниться в float если там уже MAX_SAFE_INTEGER // ошибка компенсатора увы тоже может копится, но прийдется "переполниться дважды" //}) // Чисто алгебраически, surplus член всегда должен бы равняться нулю. Берегитесь слишком оптимизирующих оптимизаторов! // Работает с высокой точностью до тех пор, пока add находиться в пределах ошибки излишка, // потому предпочтительно упорядочить слогаемые по убыванию их абсолютной величины // тест запускабелен в голой консоли см. ru.wikipedia.org/wiki/%D0%90%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC_%D0%9A%D1%8D%D1%85%D1%8D%D0%BD%D0%B0#:~:text=%D0%92%20%D0%B2%D1%8B%D1%87%D0%B8%D1%81%D0%BB%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9%20%D0%BC%D0%B0%D1%82%D0%B5%D0%BC%D0%B0%D1%82%D0%B8%D0%BA%D0%B5%20%D0%B0%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC%20%D0%9A%D1%8D%D1%85%D1%8D%D0%BD%D0%B0,%D0%BF%D0%BE%20%D1%81%D1%80%D0%B0%D0%B2%D0%BD%D0%B5%D0%BD%D0%B8%D1%8E%20%D1%81%20%D0%BD%D0%B0%D0%B8%D0%B2%D0%BD%D1%8B%D0%BC%20%D0%BF%D0%BE%D0%B4%D1%85%D0%BE%D0%B4%D0%BE%D0%BC.

[@antonhevirr6488]

ты легенда

[@user-kp7hk8vp5e]

@@teosrevival Кто или что ты такое?! Омниссия?!

[@teosrevival]

@@user-kp7hk8vp5e странно что я такого делаю, но этот вопрос в той или иной форме последнее время зачастил... Но ваша форма получилась самой символичной, технорелигия и все такое... На самом деле просто долго живу, не останавливаясь в познании

[@mtp7261]

Голосую за продолжение темы, end to end тестирование и интеграция важнейшие темы, но в интернете представлены минимально.

[@muhammadyakhshiboev7897]

++++++

[@DavidSentiurin]

++++++++

[@romko-romario]

+

[@stanislavasgoldyckis7740]

+++

[@user-eb5yw9ui6o]

++++

[@juviess]

Однозначно нужно про е2е и интеграционные. Можно на примере реакта

[@user-ci6pr6oy6q]

Определенно!

[@dimapetrashchuk3036]

Или ангуляра

[@braind_bible4845]

Блин, это в курсах есть, лучше на Vue

[@pavell53]

@@braind_bible4845 год спустя выпустить видео JEST & VUE, было бы шикарно )))

[@BenMinsk]

API + e2e для JEST + React возможно?

[@VladilenMinin]

Приятного и продуктивного тестирования)

[@vitaliy794]

Привет. Подскажи на сколько сейчас актуальна программа курса по реакту на удеми?

[@DimastaEminem]

@@vitaliy794 нормас. я вчера купил. актуально. версии практически 16/12и там и там вродь

[@DimastaEminem]

Владилен, у меня есть 1 вопрос к твоему курсу. возможно ли с тобой связаться по средствам мессенджеров и задать 2 вопроса, и украсть буквально 2 минуты твоего времени

[@Xx-bt5mo]

Скажи пожалуйста что за расширение у тебя в редакторе (которое при вызове функции пишет переменные (a: 41, b: 1"), или обозначает функцию(fn: ()=>{})....??? Есть ли такое для редактора "VS code"??? Может кто знает...? Спасибо за годный контент :) Лучший*

[@artemaveryanov6546]

Очень хотелось бы увидеть видео про связку бэка и фронта, (бэк связанный с graphql, apollo-express-server, фронт с apollo client, будет ли такое?)

[@user-jq9ej3hc6h]

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

[@MrAntonforce]

Спасибо за актуальный для меня контент! Я подсел на ваши курсы почти с самого начала канала) Вы сильно выделяетесь среди современных блогеров-преподавателей. Больших вам успехов как коммерческих так и профессиональных!

[@arhimed6720]

Беспрецедентный добродетель, спасибо большое за труд. Как всегда все оч. годно.

[@romko-romario]

Лучший урок по jest, который я встречал на Ютубе! Очень помог. Ещё я бы добавил такие базовые вещи, как: 1) возможность употреблять функцию `it` вместо `test`; 2) аргумент `done` коллбэка функции `test` / `it`; 3) функция expect.assertions. P.S. 1:23:50 Здесь замоканный респонс нужно обернуть в Promise.resolve: `axios.get.mockReturnValue(Promise.resolve(response))`, так как в оригинальном методе аксиоса возврается именно промис. А на видео нет ошибки только потому, что в функции Ajax.get (файл async.js) используется асинхронная функция (`await` умеет обрабатывать и данные, не обёрнутые в промисы). А если использовать `Promise.prototype.then`, то при условии, если возвращается не промис, будет ошибка "TypeError: axios.get(...).then is not a function".

[@akella6084]

Владилен, ты просто не представляешь, насколько вовремя для меня ты выпускаешь это видео! Спасибо.

[@rinatvaliullov3247]

Воу-воу! Наконец-то про тестирование видос. Давно ждал. У Владилена как всегда контент самый топ!

[@gavrilovalexandr4951]

Оооо даааа, наконец-то дождался jest от тебя) Спасибо, ты лучший)

[@MDanshin]

Читаете мысли, Владилен! Спасибо! С жадностью смотрю все Ваши видео и с нетерпением ожидаю новых.

[@user-wj2qg3wm5v]

Класс! Крутой видос как и всегда! Жду материалы по остальному тестированию с нетерпением

[@VADIM129]

Зашёл под одной учеткой - поставил лайк, колокольчик... Вышел, зашёл под второй учеткой - поставил лайк и колокол соответственно. Вышел, зашёл под третьей учеткой - посмотрел видео и проделал все остальное) Спасибо за ваш труд!

[@dychkos]

Отличное видео. Владилен , спасибо тебе за время и усилия вложенные в создание обучающего материала!

[@valdemarlifetv9981]

Тестирование реакт компонентов интересно.

[@Toherman15]

Спасибо за видео! Всё по полочкам и без лишнего мусора. До этого кучу материала прочитал, а в голове только увеличивалась каша. Теперь вроде появился небольшой порядок. И отдельно понравились реализации встроенных функций, реально помогает лучше понимать устройство js.

[@olenkill]

Ещё не досмотрел до конца, но уже хочу про интеграционное тестирование! Спасибо за годный контент!!

[@alexeybakushev1932]

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

[@user-zj7bn9le1o]

Классная подача материала, не останавливайся, твой труд очень полезен 👍

[@audiovideo881]

Спасибо за видео! Как всегда все великолепно!:) Было бы реально круто если еще про тестирование UI с enzyme)

[@timofey2672]

Лайк за ролик, Владилен, давай ролик по каждом виду тестирования)

[@ivanmiarkulau8320]

Отличное видео о Unit тестировании с помощью Jest. Спасибо большое!)

[@alybin]

Обалдеть) Я об этом попросил в прошлом видео и вуаля!))) Спасибо огромное, Владилен

[@racman9964]

Не так сложно, как боялся. Спасибо за урок! Будем тренироваться)

[@bender01]

спасибо всем кто делает видеоуроки, вы делаете мир проще =) не знаю тут оптимизирует ли по словам)) javascript, nodejs, unit test, юнит тестирование, видео урок

[@unicorn_herald4366]

Опять годнота подъехала,когда ты все успеваешь?)Спасибо огромное!)

[@progAdvanced]

Отлично рассказал, спасибо большое, ждём ещё видео про тестирование 👍

[@elnasurov6742]

+ за интеграционное и e2e тестирование! Очень ждем))

[@yuriivasiliev7636]

Очень отличная тема ) Спасибо ) Было бы замечательно если бы ты рассмотрел тестирование в связке Jest с react testing library. И е2е на примере Cypress. Буду чрезмерно благодарен )

[@parnasmi]

Отличные урок про Jest unit тестирование. Советую всем новичкам. Те кто 0 в тестирование js будет очен познавательно. Спасибо Владилен.

[@its.__ed]

Чувак ты самый лучший. Благодарю за новый ролик. Прям вовремя )

[@daniiljavoronkov9480]

Я как всегда, после твоих видео обалдел, как все несложно, ты как всегда на высоте. И число 42 на месте)) Все как обычно, по фэншую Спасибо, Владилен, огромное

[@foxtv5150]

Очень бы хотелось увидеть остальные виды тестирования, я как тестировщик очень заинтересован!!! Буду ждать видео! Лучший контент по JS , приятно смотреть твой контент.

[@Fxgleb]

Да давно хотел в тестирование вкатиться и именно jest использовать, спасибо за подгон

[@user-cv1ih8yk8n]

Очень ценная информация! Спасибо тебе огромное за труд :) Было бы хорошо, если бы рассмотрел тему тестирования api на бэке желательно на typescript

[@fiction7361]

Спасибо за контент и однозначно голосую за продолжение!

[@gennadiygareev8171]

Спасибо Владилен! Отличный контент!

[@cocjpok8457]

Отличное видео! Помогло побороть себя и начать работать с тестами)

[@shazplay8878]

Круто что ты есть, Владилен!💘

[@mishagarkach]

Спасибо за очередное путешествие в мир js :)

[@AlpinWeb]

Большое спасибо за ролик. Хороший вариант поковырять jest и разобраться в его базовых принципах.

[@alexanderkozlov7416]

Спасибо за ролик. Теперь для многих Unit Тестирование при помощи Jest в Javascript выглядит не таким страшным. С нетерпением ждем ролики по интеграционному и e2e-тестированию.

[@koreikin]

Спасибо за работу и такой полезный контент.

[@russianstan]

Отличное видео, спасибо за труд!

[@user-yr3gb9bh4k]

Спасиьо тебе !! Нужно больше тестов 😁

[@user-br7ux8be2r]

Спасибо! Крут!) Было бы круто еще Реакт компоненты.

[@egereva_]

спасибо! очень хочется продолжения:)

[@ArankFreedom]

Однозначно продолжать тему с тестированием, особенно в связке с vue

[@user-cd1sr5sx2r]

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

[@navajo458]

Просто топ! Шикарная подача материала!

[@oleksiypasmarnov2641]

Спасибо за материал. Очень хотелось бы увидеть интеграционное и е2е тестирование.

[@katerynabiehantseva2744]

Хорошее видео))) очень достойно обьяснил и просто.Спасибо!!

[@dmitryivanov3200]

Огромное тебе спасибо! О-о-о-о-чень доходчиво объяснил

[@SlavaCh]

Круто, жду ещё контент по тестирование интеграционному и ete

[@eurorock5912]

Спасибо! Про тесты теперь многие говорят.

[@dreamer_vi905]

Как всегда на высшем уровне. Спасибо большое, Владлен!

[@user-tr8qn6zz4i]

актуально ли видео на сегодняшний день?

[@dreamer_vi905]

@@user-tr8qn6zz4i Почему нет. Вполне.

[@user-tr8qn6zz4i]

@@dreamer_vi905 почему спрашиваю, пришло время учить тестирование, а видео вышло 3 года назад, вот и думаю, стоит ли смотреть, или по доке учить. Спасибо за ответ)

[@TheProxelle]

Ставлю лайк и начинаю смотреть!)

[@supfiger]

большое спасибо за этот урок, ты мне помог!

[@kub1k]

Спасибо за все курсы, супер

[@ashotashirov]

Отличное видео! хотелось бы продолжения...

[@FrankyyBalboa]

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

[@aquilon1790]

Спасибо тебе большое! Тесты наше все

[@lenakosyakova879]

Спасибище огромное, Владилен! 👍

[@nortonognev2788]

Увидел тему нового видео -- Лайк авансом))

[@antonkomkov]

Спасибо! Очень круто объяснил. 42:37 не обязательно глобально ставить Jest, можно просто вызвать его через ./node_modules/.bin/jest, так как он уже установлен локально

[@swashyone1]

или запустить командой npx jest 02_sync/sync.spec.js (npx как раз будет искать jest в локальной node_modules)

[@user-mg2gi7ew6y]

Отлично заходит, продолжай!!

[@michaelcovalciuc2240]

спасибо! Это было действительно полезно

[@bilionievgen9004]

Jest. Unit Тестирование в JavaScript круто что во многом разбираетесь!

[@user-dq1hs6vz7y]

ты большой молодец, спасибо тебе за твои видео

[@user-cy5hf5gi8n]

Вижу видос Владилена сразу лайк!))

[@user-nx7dc9cs7w]

Демон, как ты это делаешь ? Я только подумал о тестировании... И так уже не первый раз с твоими видосами ! ;) Спасибо большое ) пойду самовар ставить и в бой =D

[@user-xq2ng2cu3d]

Спасибо, все по полочкам разложил

[@TheWorldPeace]

Топ, как раз то что нужно! Как раз про это думал.

[@igor_cojocaru]

Забираю не глядя Спасибо

[@MarioDev]

Как всегда, лучший.

[@Zadorozhniy39]

🔥🔥🔥👍🏼 благодарю бро

[@petezhemchugov736]

В вебшторме можно "вызвать метод" .log у любой конструкции за место того, чтобы писать console.log каждый раз

[@user-cq7gz8ln9t]

Спасибо за урок!

[@user-xt5sm6yj6f]

огоооооонь, спасибо тебе огромное, топ контент

[@xeleos]

Привет Владилен, было бы интересно посмотреть как ты используешь Angular Material Table + удалённую сортировку по столбцам и другие фичи для таблиц в Ангуляре.

[@bogdanpavlovskiy3953]

годнота. Предлагаю снять angular 9 практику по типу как ты делал приложение органайзер. Было бы очень полезно

[@Dr_Osipov]

Спасибо! Тема как никогда актуальна!!

[@dobrv]

Так структурировано, развернуто, доходчиво и главное интересно никто на просторах ютуба не делает, просто душевное спасибо. Отдельно радуют комментарии под роликом, ни одного не увидел с непонятным куском кода и вопросом почему не работает, за это и аудитории спасибо)

[@alexandermironenko2941]

ппц, я изучал на английском а ты как всегда это уже запилил

[@bekzhanseitkali781]

Спасибо за видео!

[@aleksandrmatyka3118]

Огромное спасибо!

[@-getmen6001]

Отличное видео!

[@andreyzhukov2821]

Спасибо! Контент супер!

[@alexdang2357]

спасибо за контент!

[@ananta_meditations]

Супер, спасибо!

[@lessons3141]

круто, можно туториал по Cypress запилить еще )

[@andrewsinelnikov2307]

Большое спасибо

[@user-bi9mm2oo9z]

Спасибо за ролик! А расскажешь про enzyme? 😇

[@andreibiareshchanka1615]

Большое спасибо!!!

[@user-be7jw6nl1p]

Владилен, начал изучать тестирование. Замечательный урок. Но есть вопрос. Использую MobX как менеджер состоянии для React приложений. Написал обёртку для axios под типизацию запросов компании в которой есть трансформатор данных из серверных в реактивные. Иногда случается, что у меня такой запрос ломается и чтобы найти проблему дважды тратил не один час. Под такой кейс Ваш последний пример также подходит ? Буду очень благодарен ответу !

[@zerocool14pvo]

Продолжай в том же духе!!

[@nikitvuz8835]

Флаг и есть минус родной)) Часто в твоих роликах слышу: флаг минус д))) флаг д) Спасибо, так помогаешь в развитии со своими роликами, продолжай в том же духе

[@viktorprytuliuk6177]

спасибо за видос

[@user-cl6sx6jf2c]

Кто посмел дизлайкнуть такую годноту!?! Супер контент.