react-aw-step-by-step.md

• Create an empty folder
• Go into the folder
• Init package
• Install dependencies
• Add babel.config.js
• Add src and test folders
• Add button.js in src folder
• Add button.spec.js in test folder
• Run the tests
• step-by-step-gif

Create an empty folder

mkdir example-react-aw

Go into the folder

cd example-react-aw

Init package

npm init

Just press enter until you reach test command fill in aw

Install dependencies

With npm

npm i -D @after-work.js/aw @babel/core @babel/preset-env babel-plugin-istanbul @babel/plugin-transform-react-jsx react react-test-renderer

or yarn

yarn add -D @after-work.js/aw @babel/core @babel/preset-env babel-plugin-istanbul @babel/plugin-transform-react-jsx react react-test-renderer

Add babel.config.js

babel.config.js

module.exports = {
  presets: [
      ['@babel/preset-env', {
          targets: { node: 'current' },
      }],
  ],
  plugins: [
      '@babel/plugin-transform-react-jsx',
  ],
}

Add src and test folders

mkdir src
mkdir test

Add button.js in src folder

src/button.js

import React, { Component } from 'react';

class Button extends Component {
  render() {
    return (
      <button>{this.props.children}</button>
    );
  }
}

export default Button;

Add button.spec.js in test folder

test/button.spec.js

import React from 'react';
import renderer from 'react-test-renderer';
import Button from '../src/button';

describe('button', () => {
  it('renders correctly', () => {
    const tree = renderer.create(<Button>Text1</Button>).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

Run the tests

npm test

step-by-step-gif