react test

App.js

import React from 'react';

function Todo(props) {
  return (
    <div>
      <h2>{props.name}</h2>
    </div>
  )
}

export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: [
        {id: 1, name: 'hello1'},
        {id: 2, name: 'hello2'},
        {id: 3, name: 'hello3'},
      ],
      name: '0',
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleClick() {
    this.setState({tasks: [
      {id: 4, name: 'hello4'},
      {id: 5, name: 'hello5'},
    ]});
  }

  handleChange(e) {
    this.setState({
      name: e.target.value
    })
  }

  render() {
    return (
      <div>
        <h1>App</h1>
        {this.state.tasks.map(task => (
          <Todo name={task.name} key={task.id} />
        ))}
        <button className="iambutton" onClick={this.handleClick}>hack</button>
        <input className="iaminput" value={this.state.name} onChange={this.handleChange}></input>
        <article>{this.state.name}</article>
      </div>
    )
  }
}

App.test.js

import React from 'react';
import { render, cleanup } from '../src';
import { App } from './App';

describe('hello', () => {
  it('should find h1 in <App/>', () => {
    const {findByTag} = render(<App />);
    const h2 = findByTag('h1');
    expect(h2.textContent).toEqual('App');
    cleanup();
  });

  it('should find h2*3 in <App/>', () => {
    const {findAllByTag} = render(<App />);
    const h2 = findAllByTag('h2');
    expect(h2.length).toEqual(3);
    expect(h2[0].textContent).toEqual('hello1');
    expect(h2[1].textContent).toEqual('hello2');
  });

  it('should find h2*2 in <App/>', () => {
    const {findAllByTag, findByClass, simulate} = render(<App />);
    let h2 = findAllByTag('h2');
    expect(h2.length).toEqual(3);
    expect(h2[0].textContent).toEqual('hello1');
    expect(h2[1].textContent).toEqual('hello2');

    const btn = findByClass('iambutton');
    simulate.click(btn);
    h2 = findAllByTag('h2');
    expect(h2.length).toEqual(2);
    expect(h2[0].textContent).toEqual('hello4');
    expect(h2[1].textContent).toEqual('hello5');
  });

  it('should handle input', () => {
    const {findByClass, findByTag, simulate} = render(<App />);
    let article = findByTag('article');
    expect(article.textContent).toEqual('0');

    const input = findByClass('iaminput');
    simulate.change(input, {
      target: { value: 'world' }
    });
    expect(article.textContent).toEqual('world');
  })
});

babel.config.js

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};

index.js

/**
 * 简单封装 test-utils
 * TODO:
 * - findById
 */
import TestUtils from 'react-dom/test-utils';

export function render(Component) {
  let container = TestUtils.renderIntoDocument(Component);
  
  function findByClass(clsName) {
    return TestUtils.findRenderedDOMComponentWithClass(container, clsName);
  }

  function findAllByClass(clsName) {
    return TestUtils.scryRenderedDOMComponentsWithClass(container, clsName);
  }

  function findByTag(tagName) {
    return TestUtils.findRenderedDOMComponentWithTag(container, tagName);
  }

  function findAllByTag(tagName) {
    return TestUtils.scryRenderedDOMComponentsWithTag(container, tagName);
  }

  function wait(fn) {
    TestUtils.act(fn);
  }

  const simulate = TestUtils.Simulate;

  return {
    cleanup,
    findByClass,
    findAllByClass,
    findByTag,
    findAllByTag,
    simulate,
    wait,
  }
}

export function cleanup() {
  document.body.innerHTML = '';
}

package.json

{
  "name": "react-test-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-jest": "^24.8.0",
    "jest": "^24.8.0",
    "react-test-renderer": "^16.8.6"
  }
}