Use Enzyme to test React/Redux container - Code List 1

ShowBox.jsx

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { submitValue } from '../store/modules/showBox'

export class ShowBox extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      searchString: this.props.search || ""
    }
  }
  
  handleInput = (event) => {
    this.setState({
      searchString: event.target.value
    })
  }

  render () {
    return (
      <form onSubmit={(e) => this.props.handleShowSubmit(this.state.searchString, e)}>
        <div>
          <input
            type="search"
            className="form-control"
            placeholder="Search"
            value={this.state.searchString}
            onChange={this.handleInput}
          />
          <div>
            <i className="icon-search"></i>
          </div>
        </div>
      </form>
    )
  }
}

export default connect(
  (state) => ({
    search: state.showBox.search,
  }),
  (dispatch) => {
    return {
      handleShowSubmit: (text, e) => {
        if (e) {
          // Avoid redirecting
          e.preventDefault()
        }
        dispatch(submitValue(text))
      }
    }
  }
)(ShowBox)