Тест Jest не пройден, поскольку селекторы не определены

Question

Я пишу контрольный пример для компонента, и он использует избыточность, сагу и селекторы. Контрольный пример выглядит следующим образом

const initialState = {
  fetching: false,
  error: null,
  StockProducts: [],
  products: [],
  filter: '5b438ae60599132cb8b64b67'
}

const mockStore = configureStore()
const store = mockStore(fromJS(initialState))

import Stock from '../Stock'

test('for onUpdate funcion', () => {
  const props = {
    setErrorPopUp: jest.fn(),
    formSubmitAttempt: jest.fn()
  }
  const wrapper = shallow(<Stock {...props} store={store} />)
  wrapper.instance().onUpdate({ quantity: 0 })
  expect(props.setErrorPopUp).toHaveBeenCalled()

  wrapper.instance().onUpdate({ quantity: 3 })
  expect(props.formSubmitAttempt).toHaveBeenCalled()
})

Однако проверка не пройдена, и я получаю эту ошибку

TypeError: Cannot read property 'fetching' of undefined

      12 |   createSelector(
      13 |     selectStockDomain,
    > 14 |     ({ fetching }) => fetching
      15 |   )
      16 |
      17 | const StockError = () =>

Это от одного из селекторов, которые я использовал для компонента Что не так с моим тестом и почему это происходит И как я могу решить эту проблему

это стандартный компонент

    // react core
import React, { Component } from 'react'

import { connect } from 'react-redux'
import { createStructuredSelector } from 'reselect'

// component imports

// Selcetors and actions
import StockActions from './actions'
import ToastActions from 'containers/Toasts/actions'
import {
  StockFetching,
  StockError,
  StockProducts,
  StockFilter,
  Products,
  userData
} from './selectors'

// partials

const mapStateToProps = createStructuredSelector({
  fetching: StockFetching(),
  error: StockError(),
  stockProducts: StockProducts(),
  products: Products(),
  filter: StockFilter(),
  userData: userData()
})

const mapDispatchToProps = dispatch => ({
  getStockProducts: () => {
    dispatch(StockActions.getStockAttempt())
  },
  getProducts: payload => {
    dispatch(StockActions.getProductsAttempt(payload))
  },
  formSubmitAttempt: payload => {
    dispatch(StockActions.formSubmitAttempt(payload))
  },
  deleteStock: payload => {
    dispatch(StockActions.deleteStockAttempt(payload))
  },
  setErrorPopUp: payload => {
    dispatch(
      ToastActions.setToast(payload.message, payload.action, payload.time)
    )
  },
  reset: () => {
    dispatch(StockActions.reset())
  }
})

class Stock extends Component {
  state = {
    openCard: false,
    showCard: false,
    confirmDelete: false
  }

  // to show product details
  onCard = openCard => {
    this.setState({
      openCard
    })
  }

  // to show and close add to stock option
  _ShowCard = () => {
    this.setState({
      showCard: !this.state.showCard
    })
  }

  // onDlete Stock
  onDeleteStock = data => {
    let {
      props: { deleteStock },
      state: { confirmDelete }
    } = this
    if (confirmDelete) {
      deleteStock(data)
      this.setState({
        confirmDelete: false
      })
    } else {
      this.setState({
        confirmDelete: true
      })
    }
  }

  // update the products
  handlesubmit = data => {
    if (parseInt(data.quantity) < 1) {
      this.props.setErrorPopUp({
        message:
          'You cannot set quantity to zero.Please enter valid qunatity and try again',
        action: 'danger',
        time: '5000'
      })
    } else {
      this.props.formSubmitAttempt({
        product: data.product.key,
        quantity: data.quantity
      })
      this._ShowCard()
    }
  }

  onUpdate = data => {
    if (parseInt(data.quantity) < 1) {
      this.props.setErrorPopUp({
        message: 'You cannot set quantity to zero.Use delete actions',
        action: 'danger',
        time: '5000'
      })
    } else {
      this.props.formSubmitAttempt({
        product: data.id,
        quantity: data.quantity
      })
    }
  }

  onCancelDelete = () => {
    this.setState({
      confirmDelete: false
    })
  }

  onGetStock = () => {
    let { getStockProducts, getProducts, userData } = this.props
    getStockProducts()
    getProducts({ user: userData._id })
  }

  componentDidMount () {
    this.onGetStock()
  }

  render () {
    let {
      props: { stockProducts, error, products, fetching },
      state: { openCard, showCard, confirmDelete },
      onCard,
      onGetStock,
      _ShowCard,
      handlesubmit,
      onUpdate,
      onDeleteStock,
      onCancelDelete
    } = this
    return (
      <KeyboardAvoidingWrapper fluid enabled={!showCard}>
            UI GOES HERE ....
      </KeyboardAvoidingWrapper>
    )
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Stock)

Спасибо

Answer 1

Когда вы тестируете Компонент, хорошей идеей будет протестировать только поведение Компонента независимо от вашего хранилища.Поскольку внутренне хранилище переходит в состояние к Компоненту как реквизиты.

1.export ваш Компонент

Таким образом, ваш код определения Компонента становится

class Stock extends Component {

до

export class Stock extends Component {

2.import только компонент без Connect HOC

Вот так

import { Stock } from '../Stock'

test('for onUpdate funcion', () => {
  const props = {
    setErrorPopUp: jest.fn(),
    formSubmitAttempt: jest.fn()
  }
  const wrapper = shallow(<Stock {...props} />)

  // modify your code to see how your component behaves with different props
  wrapper.instance().onUpdate({ quantity: 0 })
  expect(props.setErrorPopUp).toHaveBeenCalled()

  wrapper.instance().onUpdate({ quantity: 3 })
  expect(props.formSubmitAttempt).toHaveBeenCalled()
})