react-redux-starter-kit

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

• NPM scripts
• Features
• Тестирование
• Документация

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.

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