там хреновый пример

Нельзя быть настолько ленивым!

можно

мне надо идти пить

но надо код на слайд

наверняка у кого-то есть

а я пока другие слайды доделаю

придется самому писать(

))

import React from 'react'; class Component extends React.Component { handleClick = () => { this.props.fetchData(); } render() { return ( <button onClick={this.handleClick}></button> ); } } export default Component;

Ребята я тут вообще в восторге от Jest!

от снэпшотов?

Тесты для React компонентов :) это просто обалденно!

лол

+ для Store + Для WebAPI

вообще огонище!

Вы же тоже пишите тесты?

Mind Blown

А моки какие мммууууааахх!

Просто зашибенные :)

import React from 'react'; class Component extends React.Component { handleClick = () => { this.props.fetchData(); } render() { return ( <button onClick={this.handleClick}></button> ); } } export default Component;

ещё там вроде точку с запятой ставят после проперти

ну как после любого экспрешна. спасибо, Ярослав

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

аааа ну есть такое :)

Но я пока не сталкнулся с такой надобностью :)

ну и если тесты на DOM настоящий завязаны, тоже проблема

Ну не знаю :) вроде норма :) если через shalow или mount из enzyme

Парни а кто имел дело c redux-form, кидаю ошибку в хэндлер, а по факту в пропсах формы ошибки нет хотя экшн я вижу "redux-form/SET_SUBMIT_FAILED"

airbnb :) авторы :)

http://airbnb.io/enzyme/docs/api/shallow.html

Это по теме тестов на реальном ДОМе

YmpCNk0zSXc= я немного не про то. что делать, если у меня в компоненте есть строчка node.parentNode.clientWidth?

или document.body.clientWidth? мой гугл кунгфу говорит, что clientWidth в jsdom не работает и не будет работать

может, чат опровергнет?

Ого :) Хм :) ну это да, сильно специфическая вещь

А может как то замокать можно?

Не будет)

clientWidth

Element.prototype.clientWidth? фигово, потому что тест, например, нужен для сравнения body => width и node => width

сразу все замокается)

PhantomJS такое может

ну вот, а фантом запускается через карму

подождите headless chrome

он вроде скоро скоро будет

вроде год назад еще объявили, а воз и ныне там

вроде год назад еще объявили, а воз и ныне там

https://bugs.chromium.org/p/chromium/issues/detail?id=546953#c54

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

ребят, такая проблема

Имеется fetch(…).then(…).catch(err => dispatch(blabla(err)))

почему этот кэтч ловит абсолютно все ошибки, даже в другим компонентах

Как правильно ловить ошибки из запроса?

все зависи от того ,что сделать хотите. catch поймает throw и reject из цепочки

Ну, если допустим у меня в запросе 500 ошибка или 401, как мне их ловить и отдавать в нужный диспатч?

401 -> reject -> catch -> обработка, насколько я понимаю

т.е. catch внутри then делать?

catch ловит любую ошибку в стеке которая произошла с начала вызова

почти то же, что try...catch, только для асинхронных функций

http://learn.javascript.ru/promise

спасибо, чет не додумался в доке глянуть

то есть например если диспатчится экшн о начале загрузки а при рендере вылетает ошибка то она улетит в catch промиса

ага, теперь понял как правильно

друзья, а вы react и react-dom в vendors.js какой-нибудь выносите?

Через commons chunk

а кто-то упарывается и через DllReferencePlugin

угу, про dll видел пару статеек, спасибо

Друзья, а эта штука только для продакшна должна использоваться? https://www.npmjs.com/package/lodash-webpack-plugin

Друзья, а эта штука только для продакшна должна использоваться? https://www.npmjs.com/package/lodash-webpack-plugin

по хорошему да, но из-за нее может возникнуть много неожиданных багов в проде, так что лично я юзаю и в dev тоже, чтобы ошибки отлавливать на этапе разработки

@leo_nik в babelrc достаточно будет "development": { "plugins": [ "transform-react-jsx-source", "lodash" ] }, "production": { "plugins": [ "lodash" ] } ?

@leo_nik в babelrc достаточно будет "development": { "plugins": [ "transform-react-jsx-source", "lodash" ] }, "production": { "plugins": [ "lodash" ] } ?

это же webpack plugin

ага, но он в связке с бабелевским

точно, доку как раз к бабелевскому смотрел, перепутал)

бабеловский может и один юзаться

ага, понял

приведу пример на что я напарывался, когда в dev не юзал этот плагин: без flattening если делал так _.flowRight(fn1, fn2, fn3), то в продакшн env падала ошибка, надо было передавать массив _.flowRight([fn1, fn2, fn3])

это не всегда легко отловить в коде

приходилось всегда еще и в продакшн энв тестировать приложение на предмет правильного вызова функций lodash-а

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

привет, умеет кто в SSR?

а что там сложного?

как вы боретесь с тем, что нода не умеет импорты и ничего не знает о вебпаковском resolve.root (если вы им пользуетесь)?

NODE_PATH

Импорты — babel-node

Импорты — babel-node

+ 1

просто babel-loader

NODE_ENV=production APP_ENV=production NODE_PATH=./src $(npm bin)/babel-node server.js

babel-node лучше не гонять на проде

зачем? если можно гонять оттранспайленную версию?

ну вот, а фантом запускается через карму

Не обязательно, фантом можно по разному запускать, мне удобнее всего через horseman

Не обязательно, фантом можно по разному запускать, мне удобнее всего через horseman

+1, мы найтвотчем его запускаем