Skip to content
Modular starter kit for React+Redux+React Router projects.
Branch: master
Clone or download
in19farkt Merge pull request #84 from fullstack-development/remove-useless-comp…
…onents

remove header, footer, grid & rewrite default exports
Latest commit c806ba7 Mar 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
@types Add CNAME file for gh-pages deployment Mar 1, 2019
docs Demo app: switch to default imports Feb 19, 2019
generators
server
src
webpack
.babelrc
.gitignore
.stylelintrc
LICENSE Initial commit Nov 16, 2016
README.md 51 hmr configure for i18n jss (#68) Feb 2, 2019
jest.config.js Finished moving to material-ui Jun 12, 2018
jest.setup.ts
npm-shrinkwrap.json Add CNAME file for gh-pages deployment Mar 1, 2019
package.json
tsconfig.json
tslint.json 43 add redux form wrappers (#47) Jan 8, 2019

README.md

react-redux-starter-kit

Modular starter kit for React+Redux+React Router projects.

NPM scripts

To start localy

  • npm run dev for development environment in watch mode
  • npm run prod for production environment in watch mode

To build localy (see build folder)

  • npm run build:dev for development environment without watch mode
  • npm run build:prod for production environment without watch mode

To start bundle analyzer

  • npm run analyze:dev for development environment
  • npm run analyze:prod for production environment

To start isomorphic server

  • npm run server:dev for development environment in watch mode
  • npm run server:prod for production environment without watch mode

To start yeoman generator create-feature

  • npm run yeoman

Features

  • Typescript 2.x
  • React 16.x
  • React-router 4.x
  • Redux
  • Redux-saga for side-effects
  • SCSS
  • React-JSS
  • BEM methodology
  • Webpack 4.x
  • Tests (Jest, sinon, enzyme)
  • Test coverage
  • Hot reload
  • Yeoman blocks generator tasks (features, modules, ... )
  • Code splitting (async chunks loading)
  • Isomorphic
  • Material-UI

Тестирование

Тесты используют фреймворк Jest

Запуск

  • npm test или npm t - разовый прогон тестов
  • npm run test:watch - запуск тестов в watch-режиме
  • npm run test:debug - запуск с возможностью подключения для отладки ( Chrome / VSCode / Webstorm ).
  • npm run test:coverage - запуск с генерацией карты покрытия кода. Результаты можно открыть в браузере <projectDir>/coverage/lcov-report/index.html.

Snapshot Testing

import React from 'react';
import { shallow } from 'enzyme';
import GenericDateInput from './../GenericDateInput';

it('renders correctly', () => {
  const component = shallow(<GenericDateInput />)

  expect(component.debug()).toMatchSnapshot();
});

После первого запуска теста создается эталонный снепшот, который будет помещен в папку __snapshots__ рядом с файлом теста. Его нужно проверить на корректность. После изменений в верстке компонента в терминале будут отображены изменения произошедшие в компоненте, и если эти изменения ожидаемы, то нужно зафиксировать новые снепшоты, для этого достаточно в терминале нажать клавишу "u" (при условии что тесты запущены в watch-режиме). ВНИМАНИЕ!!! Будут перезаписаны все снепшоты, не совпадающие с эталонными!

Чтобы обновить снепшот для конкретного теста можно воспользоваться it.only(name, fn, timeout) или describe.only(name, fn), если мы хотим обновить снепшоты для группы тестов.

При возникновении ошибок при тестировании в watch моде:

Для MacOS (Error: watch EMFILE): Удалить watchman, глобально установленный через npm или yarn, если таковой был, и установить повторно через brew.

Для Linux (Error ENOSPC): воспользоваться данной командой:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

ссылка на issue

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.