Skip to content

fullstack-development/react-redux-starter-kit

Repository files navigation

react-redux-starter-kit

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

NPM scripts

To start locally

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

To build locally (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.
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