generator-phoenix-react

A generator to create a phoenix application using React as view

Features

• End to end testing with hound
• Unit Testing with Karma, mocha and chai
• Ecmascript 2015

Installation

First, install Yeoman and generator-phoenix-react using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-phoenix-react

Then generate your new project:

yo phoenix-react <my-project-name>

Testing

Tests can be divided into three groups.

1. React unit tests
2. Phoenix unit tests
3. Phoenix E2E tests

Running tests

Make sure to have a web driver running.

# Run the entire test suite 
bin/test
 
# OR start the web driver manually and run the entire suite 
# Make sure to start the web driver 
chromedriver # default configured for hound 
npm run-script build && mix test --include feature
 
# Run the tests for react components only 
npm test
# or 
npm run-script test:watch # for TDD 
 
# Run the elixir unit tests only (Fastest) 
mix test --exclude feature --exclude integration

Use a different web driver for E2E testing

# config/test.exs
# Replace this line with a different configuration that can be found at
# https://github.com/HashNuke/hound/blob/master/notes/configuring-hound.md
config :hound, driver: "phantomjs"

NOTE: Make sure to change bin/test to start this web driver instead.

React component test example

// test/static/js/app.spec.js
import React from 'react';
import {expect} from 'chai';
/**
* <my-project> is replaced by your project name which can be found under "resolve.alias" in
* webpack.config.js in the root of this project
*/
import App from '<my_project>/components/app';
import {render} from 'test_helpers';
 
 
describe('App', () => {
  it ('renders html', () => {
    let output = render(<App />);
    expect(output.props.children).to.have.length.above(0);
  });
});

Getting To Know Yeoman

Yeoman has a heart of gold. He's a person with feelings and opinions, but he's very easy to work with. If you think he's too opinionated, he can be easily convinced. Feel free to learn more about him.

License

MIT © Thomas Farla