Jest. Unit Тестирование в JavaScript
Вставка
- Опубліковано 28 вер 2024
- Исходники тут: t.me/js_by_vla...
Получить профессию Frontend разработчика -
bit.ly/3uc9JrT
Подробнее узнать об обучении в Result School -
bit.ly/3QUu9zq
Бесплатный курс HTML & CSS - bit.ly/3xUXCjW
Сделать 5 проектов на JavaScript - bit.ly/3y4y7go
Я в соц сетях:
Telegram: t.me/js_by_vla...
VK: vladile...
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_sc...
VK: result....
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vla...
Roadmap по каналу:
vladilen.notio...
Jest. Unit Тестирование в JavaScript
#javascript #jest
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ую систему
!!! которое конечно происходит когда вы преобразуете его в строку !!!
Без претензий к Владилену. Пояснение этих фактов бы точно сбило с толку всех осваивающих сабж Юнит Тест.
Потому видео курс снимает он, а я пишу этот комментарий, так сказать факультативная инфо =)
Раз уж подняли в топ, порылся еще:
Как вы понимаете, если ошибку округления повторить в цикле миллион раз, то в худшем случае она будет в миллион раз больше, т.е. применительно к данному примеру останется 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.
ты легенда
@@teosrevival Кто или что ты такое?! Омниссия?!
@@ЕвгенийПеревалов-ч1т странно что я такого делаю, но этот вопрос в той или иной форме последнее время зачастил...
Но ваша форма получилась самой символичной, технорелигия и все такое...
На самом деле просто долго живу, не останавливаясь в познании
Приятного и продуктивного тестирования)
Привет. Подскажи на сколько сейчас актуальна программа курса по реакту на удеми?
@@vitaliy794 нормас. я вчера купил. актуально. версии практически 16/12и там и там вродь
Владилен, у меня есть 1 вопрос к твоему курсу. возможно ли с тобой связаться по средствам мессенджеров и задать 2 вопроса, и украсть буквально 2 минуты твоего времени
Скажи пожалуйста что за расширение у тебя в редакторе (которое при вызове функции пишет переменные (a: 41, b: 1"), или обозначает функцию(fn: ()=>{})....??? Есть ли такое для редактора "VS code"??? Может кто знает...? Спасибо за годный контент :) Лучший*
Очень хотелось бы увидеть видео про связку бэка и фронта, (бэк связанный с graphql, apollo-express-server, фронт с apollo client, будет ли такое?)
Голосую за продолжение темы, end to end тестирование и интеграция важнейшие темы, но в интернете представлены минимально.
++++++
++++++++
+
+++
++++
Воу-воу! Наконец-то про тестирование видос. Давно ждал. У Владилена как всегда контент самый топ!
Это лучшее, что можно найти на просторах русскоязычного интернета. Очень хочется больше новых видео! Приятно смотреть, слушать и учиться! Спасибо большое, Владилен!
Владилен, ты просто не представляешь, насколько вовремя для меня ты выпускаешь это видео! Спасибо.
Я как всегда, после твоих видео обалдел, как все несложно, ты как всегда на высоте. И число 42 на месте))
Все как обычно, по фэншую
Спасибо, Владилен, огромное
Демон, как ты это делаешь ? Я только подумал о тестировании... И так уже не первый раз с твоими видосами ! ;) Спасибо большое ) пойду самовар ставить и в бой =D
Поставил лайк, пишу комментарий, подписываться ещё не спешу, но возможно в будущем, а колокольчик не нашёл.
За видео спасибо. Очень познавательно и интересно.
Обалдеть) Я об этом попросил в прошлом видео и вуаля!))) Спасибо огромное, Владилен
Отличное видео! Помогло побороть себя и начать работать с тестами)
Классная подача материала, не останавливайся, твой труд очень полезен 👍
Флаг и есть минус родной)) Часто в твоих роликах слышу: флаг минус д))) флаг д)
Спасибо, так помогаешь в развитии со своими роликами, продолжай в том же духе
Большое спасибо за ролик. Хороший вариант поковырять jest и разобраться в его базовых принципах.
Так структурировано, развернуто, доходчиво и главное интересно никто на просторах ютуба не делает, просто душевное спасибо.
Отдельно радуют комментарии под роликом, ни одного не увидел с непонятным куском кода и вопросом почему не работает, за это и аудитории спасибо)
Спасибо за контент и однозначно голосую за продолжение!
Спасибо за работу и такой полезный контент.
Команда - нпм инстОл. Тулза для тестирования моЧа, правильно звучит - мока. мЭтчеры, от слова мАтч) Иногда как произнесешь, немного испанский стыд вызывает)) А вообще, спасибо за труды, недавно натолкнулся на канал, в предверии смены проекта - пригодились некоторые темы для закрепления знаний или даже узнать что-то новое узнать.
Спасибо!
Крут!)
Было бы круто еще Реакт компоненты.
Спасибо тебе большое! Тесты наше все
Подскажите, как врубить types/jest на 20:39 на VS Code
Спасибо за материал. Очень хотелось бы увидеть интеграционное и е2е тестирование.
Этого очень мало для тестирования. На реальных проектах с этими знаниями далеко не уедешь. По сути это как в книге прочитать введение. Не понимаю почему все в восторге. На канале webDev больше инфы, хотя и ее мало для ркальной работы.
Голосую за end to end тестирование и интеграционное тестирование)
ппц, я изучал на английском а ты как всегда это уже запилил
Хороший туториал.
Есть ли в планах сделать такой же подробный туториал с какой-то библиотекой отрисовки react, желательно react-testing-library ?
По этой теме много маленьких обрывочных уроков, но более комплексного не встречал
Владилен, уже 30000. Когда стрим?)
Когда место оборудую для трансляции)
*Л. а. й. к. о. с.* за видос.
Спасибо за ролик!
А расскажешь про enzyme? 😇
круто, можно туториал по Cypress запилить еще )
Спасибо!
Контент супер!
Спасибо за видео!
Спасибо за видео! Всё доступно и понятно. Вот только вопрос - как использовать jest на фронте, чтобы он не ругался на import. Нагуглить можно кучу разнообразных решение разной степени тяжести. Но, мне интересен, самый просто кейс - новое приложение, устанавливаю webpack, jest... что ещё нужно?
Огромное спасибо!
А для ноды это катит?
Я в начале ролика про это рассказываю
Да здравствует годнота
Спасибо
Я правильно понял, что в первом примере где в функции возвращается объект с функций использовано замыкание?
Владилен, можно ли результаты тестирования вывести на монитор с помощью кастомной кнопки?
С моками и стабами не очень понятно, как это работает и что конкретно мокать
интеграционное тестирование хотелось бы изучить а то достали блин на собесах спрашивать об этом
Я бы хотел посмотреть тестирование в React
Класс!!!!!!!!!!!!!
Спасибо за отличный контент, ОЧЕНЬ хотелось бы подробное видео Jest + React. Владилен, сделай пожалуйста!
спасибо за видео. можно исходники?
В телеграме
3 вид тестирования заинтересовал, есть ли видео?
в точку брат
Подари свой курс по реакту, очень надо)))
(Купил твой курс по ангуляру - огонь))) )
Жди скидок. На Udemy это очень частое явление. За десять долларов чуть ли не каждый месяц есть возможность курс урвать.)
первое приближение 🙈
Все было интересно смотреть до момента описания метода группировки. С текущей минуты ролик можно переименовывать в "как программировать нельзя". Автору бы книжки про алгоритмы сортировок, группировок полистать. =/ В остальном, все чудно.
лайк тебе братан, недавно только задумался что нужно уметь в тесты, и тут подгон такой. Спс
Однозначно нужно про е2е и интеграционные. Можно на примере реакта
Определенно!
Или ангуляра
Блин, это в курсах есть, лучше на Vue
@@braind_bible4845 год спустя выпустить видео JEST & VUE, было бы шикарно )))
++++
Тестирование реакт компонентов интересно.
Беспрецедентный добродетель, спасибо большое за труд. Как всегда все оч. годно.
Оооо даааа, наконец-то дождался jest от тебя) Спасибо, ты лучший)
Лайк за ролик, Владилен, давай ролик по каждом виду тестирования)
Скажи пожалуйста что за расширение у тебя в редакторе (которое при вызове функции пишет переменные (a: 41, b: 1"), или обозначает функцию(fn: ()=>{})....??? Есть ли такое для редактора "VS code"??? Может кто знает...? Спасибо за годный контент :) Лучший*
Да есть. Я писал про него в телеграм канале
В вебшторме можно "вызвать метод" .log у любой конструкции за место того, чтобы писать console.log каждый раз
Ещё не досмотрел до конца, но уже хочу про интеграционное тестирование!
Спасибо за годный контент!!
Очень отличная тема ) Спасибо ) Было бы замечательно если бы ты рассмотрел тестирование в связке Jest с react testing library. И е2е на примере Cypress. Буду чрезмерно благодарен )
Зашёл под одной учеткой - поставил лайк, колокольчик... Вышел, зашёл под второй учеткой - поставил лайк и колокол соответственно. Вышел, зашёл под третьей учеткой - посмотрел видео и проделал все остальное) Спасибо за ваш труд!
Читаете мысли, Владилен! Спасибо! С жадностью смотрю все Ваши видео и с нетерпением ожидаю новых.
Лучший урок по 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".
Круто что ты есть, Владилен!💘
мне кажется, если кому-то не нравится произношение на английском, они могут пойти и посмотреть те же туторы на английском, а на русском и так все понятно. Нормальный у вас английский, все понятно
Есть люди, которым просто по приколу докопаться до мелочей. Причем в текущем случае это полный абсурд, так как никак не относится к видео.
не заигрывай. - null - нУл реально бесит, привыкаешь, потом западному заказчику нУлкаешь в скайпе, только потому что в голове крутится
Мнение со стороны ученика: я не пользовался никогда Lodash и не очень понимаю, почему невозможно объяснить jest без использования библиотеки, которая необязательна сама по себе для jest. За первую половину лайк, за вторую - дизлайк
Утуберские коучи не учителя, а так... насрали.
+ за интеграционное и e2e тестирование! Очень ждем))
сильно быстро чувак, не успеваю переписывать и подумать.
Ставлю 0.75 звук херовый
та же самая проблема
Кто посмел дизлайкнуть такую годноту!?! Супер контент.
Этой инфы слишком мало для познания Jest, нужен целый плейлист с тестированием хотя бы для большой тройки фреймворков
#thumbup
Только Mocha - мока, а не моча
Да, пожалуй
Почему? "Ch" в английском читается как "ч". Children, Chocolate, Challenge.
@@akella6084 Как пример сhemistry, stomach, chaos, прочитайте через "ч" в приличном аноглоговорящем обществе.
@@ivansalmin4476 или character.
@@akella6084 Грамматика английского языка лишена логики, его не программисты придумали ))
В английском много заимствований из других языков.
Mocha звучит как mōkə, как кофе Мока )))
Спасибо! Очень круто объяснил.
42:37 не обязательно глобально ставить Jest, можно просто вызвать его через ./node_modules/.bin/jest, так как он уже установлен локально
или запустить командой npx jest 02_sync/sync.spec.js (npx как раз будет искать jest в локальной node_modules)
Привет Владилен, было бы интересно посмотреть как ты используешь Angular Material Table + удалённую сортировку по столбцам и другие фичи для таблиц в Ангуляре.
Местами очень режет ухо английский, флуур, аякс .... но терпимо.
translate.google.com/#view=home&op=translate&sl=en&tl=uk&text=floor%2C%0AAjax
Опять годнота подъехала,когда ты все успеваешь?)Спасибо огромное!)
годнота. Предлагаю снять angular 9 практику по типу как ты делал приложение органайзер. Было бы очень полезно
Владилен, начал изучать тестирование. Замечательный урок. Но есть вопрос. Использую MobX как менеджер состоянии для React приложений. Написал обёртку для axios под типизацию запросов компании в которой есть трансформатор данных из серверных в реактивные. Иногда случается, что у меня такой запрос ломается и чтобы найти проблему дважды тратил не один час.
Под такой кейс Ваш последний пример также подходит ?
Буду очень благодарен ответу !
В Jasmine матчеры toBe и toEqual хотя для примитивов работают так же, но это не одно и то же. toBe по сути это аналог строгого сравнения ===, toEqual несколько сложнее сравнивает. Если на примитивах разница не заметна то на объектах разницу очень хорошо видно. С помощью toEqual можно сравнивать между собой разные массивы и объекты и он сравнит. С Jest мне кажется такая же картина.
Подскажите, плиз, как сделать так, чтобы в VSCode автоматом подсказывало команды, доступные для jest? Не могу понять, как это загуглить. Столько сайтов осмотрел :(
а браузерное юнит тестирование вообще распространено? какие фреймворки лучше для этого подходят?
Как же ты ахуенно объясняешь, нихуя не понимаю пока что, но очень интересно
Неистово голосую за продолжение темы тестирования
А есть на канале что-то посложнее примитивных примеров? Например, тестирование React компонентов.
Класс! Крутой видос как и всегда! Жду материалы по остальному тестированию с нетерпением
compact можно упростить немного
compact = arr => arr.filter(val => val), т.е без !!val
Подскажите как сделать подсказку параметров функции в visual code так же как у webstorm ?
У тебя баг в строке где ты говоришь end-to-end тестирование. Ты минимум два раза сказал тустирование
Плюс за е2е и интеграционное!
Ты правильно предположил, дрИвен)
Оооо годнота то какая)) Может курс по NextJS? Запульте лайками кто тоже за NextJS (:
Спасибо за видео! Как всегда все великолепно!:) Было бы реально круто если еще про тестирование UI с enzyme)
Видео которое повторяет документацию из сайта, ничего нового
Жиесть, надо правильно произносить название данного фрейма
Благодарю
Давайте скинемся Влдилену на курсы английского
Заснул. Прямо за компом. Его голос заставляет спать.
бро. на 31:50 ты тесть по результат пишешь.. так себе подход.
Метод пуш может принимать больше одного параметра
Это Жеееесть))