create-styled-component

Generate one or multiple boilerplate components within src with the following files:

src
├── components
	├── <ComponentName>
		├── index.js
		├── <ComponentName>.js
		├── <ComponentName>.test.js
		├── README.md

Note: the scripts are bash scripts and may not run on Windows machines. If that is the case, use Git Bash.

Install

npm install -g create-styled-component

Example

create-styled-component Test

will create

src
├── components
	├── Test
		├── index.js
		├── Test.js
		├── Test.test.js
		├── README.md

where the individual files look like the following:

index.js

import Test from './Test';

export default Test;

Test.js

import React, { Component } from 'react';
import './Test.css';

class Test extends Component {
  render() {
    return <div>This is a component called Test.</div>;
  }
}

export default Test;

Test.test.js

import React from 'react';
import { shallow, render, mount } from 'enzyme';
import Test from './Test';

describe('Test', () => {
  let props;
  let shallowTest;
  let renderedTest;
  let mountedTest;

  const shallowTestComponent = () => {
    if (!shallowTest) {
      shallowTest = shallow(
        <Test {...props}>{props.children}</Test>
      );
    }
    return shallowTest;
  };

  const renderTestComponent = () => {
    if (!renderedTest) {
      renderedTest = render(
        <Test {...props}>{props.children}</Test>
      );
    }
    return renderedTest;
  };

  const mountTestComponent = () => {
    if (!mountedTest) {
      mountedTest = render(
        <Test {...props}>{props.children}</Test>
      );
    }
    return mountedTest;
  };  

  beforeEach(() => {
    props = {};
    shallowTest = undefined;
    renderedTest = undefined;
    mountedTest = undefined;
  });

  // Shallow / unit tests begin here
 
  // Render / mount / integration tests begin here
  
});

License

MIT © Haldun Anil