import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import PriceList from '../../components/priceList';
import ViewTab from '../../components/viewTab';
import CreateBtn from '../../components/createBtn';
import TotalPrice from '../../components/totalPrice';
import MonthPicker from '../../components/monthPicker';
import { testCategories, testItems } from '../../config/testData';
import { LIST_VIEW, CHART_VIEW } from '../../config/action';

const newItem = {
  'id': '_kly1klqw6',
  'title': '新添加的项目',
  'price': 300,
  'date': '2019-02-01',
  'cid': '12'
}

class Home extends Component {

  state = {
    arr: [],
    totalIncome: 0,
    totalOutcome: 0,
    tabView: 'list',
    currentDate: {}
  }

  componentWillMount () {
    this.init()
  }
	// 初始化数据
  init = (arrList = testItems) => {
    const { currentDate } = this.state
    const arr = arrList.map(item => {
      testCategories.forEach(items => {
        if (item.cid === items.id) {
          item['category'] = items
        }
      })
      return item
    }).filter(item => {
      return item.date.includes(`${currentDate.year}-0${currentDate.month}`)
    })
    console.log(arr)

    const totalIncome = arr.filter(item => item.category.type === 'income').reduce((prev, item) => {
      return item.price + prev
    }, 0)

    const totalOutcome = arr.filter(item => item.category.type === 'outcome').reduce((prev, item) => {
      return item.price + prev
    }, 0)

    this.setState({
      arr,
      totalOutcome,
      totalIncome
    })
  }

  deleteItem = id => {
    const arr = this.state.arr.filter(item => item.id !== id)
    const totalIncome = arr.filter(item => item.category.type === 'income').reduce((prev, item) => {
      return item.price + prev
    }, 0)

    const totalOutcome = arr.filter(item => item.category.type === 'outcome').reduce((prev, item) => {
      return item.price + prev
    }, 0)
    this.setState({
      arr,
      totalOutcome,
      totalIncome
    })
  }

  onModifyItem = id => {
    const arr = this.state.arr.map(item => {
      if (item.id === id) {
        return {...item, title: '更新后的标题'}
      }else {
        return item
      }
    })
    this.setState({
      arr
    })
  }

  onTabChange = view => {
    console.log(view)
    this.setState({
      tabView: view
    })
  }

  changeDate = (year, month) => {
    this.setState({
      currentDate: { year, month }
    }, () => {
      this.init()
    })
  }

  onCreateItem = () => {
    const arr1 = [newItem, ...this.state.arr]
    this.init(arr1)
  }

  render () {
    const { arr, totalOutcome, totalIncome, tabView  } = this.state
    return (
      <Fragment>
        <header className='header-flex'>
          <MonthPicker
          changeDate={this.changeDate}/>

          <TotalPrice
            income={totalIncome}
            outcome={totalOutcome}
          />
        </header>
        <main>
          <ViewTab
            onTabChange={this.onTabChange}
            activeTab={tabView}
          />
          <CreateBtn
            onCreateItem={this.onCreateItem}
          />
          <div className="content-area py-3 px-3">
            {
              tabView === LIST_VIEW &&
              arr.map(item => {
                return <PriceList
                  key={item.id}
                  iconName={item.category.iconName}
                  type={item.category.type}
                  title={item.title}
                  price={item.price}
                  date={item.date}
                  id={item.id}
                  onModifyItem={this.onModifyItem}
                  deleteItem={this.deleteItem}
                />
              })
            }
            {
              tabView === CHART_VIEW &&
              <h1>这就是我的</h1>
            }
          </div>
        </main>
      </Fragment>
    )
  }
}

export default Home;

这是测试文件

import React from 'react';
import { shallow, mount } from 'enzyme';
import PriceList from '../priceList';
import { testCategories, testItems } from '../../config/testData';
import { arr } from '../../containers/home';

const props = {
  onModifyItem: () => {},
  deleteItem: () => {},
  arr,
}

jest.mock('../../config/testData');

console.log(arr)
let wrapper
describe('test PriceList component', () => {
  // 每次都会执行
  beforeEach(() => {
    wrapper = shallow(<PriceList {...props} />)
    // wrapper = mount(<PriceList />)
  })

  afterEach(() => {
    wrapper.unmount();
  });

  it('should render the component to match snapshot', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

我应该如何在测试文件中获取到home组件中arr的数据