MobXコンポーネントのテスト

Question

私は、Mobxのコンポーネントをテストして、私たちが小道具を渡しているという問題に直面しています。 私はJestを使用しています。単純なスナップショットテストを行いたいだけです。

デフォルトのエクスポートの次に、@injectと@observerが影響を与えないように、コンポーネントの名前付きエクスポートも使用しています。私はちょうど私自身の '費用'と 'フィルター'を小道具として渡すべきですが、それは機能しません。

これは私のコンポーネントです。私はそのコンポーネントへの小道具としてRootStoreを渡しています。

ExpenseListコンポーネント

@inject('RootStore') 
    @observer 
    export class ExpenseList extends Component { 
     render() { 
     const {expenses} = this.props.RootStore.ExpensesStore 
     const {filters} = this.props.RootStore.FiltersStore 
     const expensesFilter = selectExpense(expenses, filters) 
     return (
      <div> 
      { 
      expenses.length === 0 ? (
       <p>No expenses</p> 
      ) : (
       expensesFilter.map((expense) => { 
       return <ExpenseListItem key={expense.id} {...expense} /> 
       }) 
      ) 
      } 
      </div> 
     ) 
     } 
    } 

ExpenseList.test.js

import React from 'react' 
import { shallow } from 'enzyme' 
import { ExpenseList } from '../../components/ExpenseList' 
import expenses from '../fixtures/expenses' 

test('should render ExpenseList with expenses',() => { 
    // const wrapper = shallow(<ExpenseList RootStore={{'ExpensesStore':{'expenses':expenses}}}/>) 
    const wrapper = shallow(<ExpenseList 
    RootStore={ 
    { 
     'ExpensesStore':{ 
     'expenses':expenses 
     }, 
     'FiltersStore': { 
     'filters': { 
      text: 'e', 
      sortBy: 'date', 
      startDate: '11.2017.', 
      endDate: '12.2017.' 
     } 

     } 
    } 
    } 
    />) 
    expect(wrapper).toMatchSnapshot(); 
}) 

これは私のRootStore

import ExpensesStore from './ExpensesStore' 
import FiltersStore from './FiltersStore' 

class RootStore { 
    ExpensesStore = new ExpensesStore(this) 
    FiltersStore = new FiltersStore(this) 
} 

const rootStore = new RootStore() 

export default rootStore 

ExpensesStore

class ExpensesStore { 

    constructor(rootStore) { 
    this.rootStore = rootStore 
    } 

    @observable expenses = []; 

    findExpense(paramsId) { 
    return computed(() => { 
     return this.expenses.find((expense) => expense.id === paramsId) 
    }).get() 
    } 

} 

export default ExpensesStore 

FiltersStore

class FiltersStore { 

    constructor(rootStore) { 
    this.rootStore = rootStore 
    } 

    @observable filters = { 
    text: '', 
    sortBy: 'date', 
    startDate: moment().startOf('month'), 
    endDate: moment().endOf('month') 
    } 

} 

export default FiltersStore 

Answer 1

[OK]をクリックします。問題は、コンポーネントの最上部にあるデコレータでした。

浅いレンダリングを使用しても、注入されたコンポーネントをテストするときに有用な結果は得られません。インジェクタのみがレンダリングされます。浅いレンダリングをテストするには、wrappedComponent

test('should render ExpenseList with expenses',() => { 
    const wrapper = shallow(<ExpenseList.wrappedComponent 
    RootStore = { 
    { 
     ExpensesStore: { 
     expenses 
     }, 
     FiltersStore: { 
     filters: { 
      text: 'e', 
      sortBy: 'date', 
      startDate: '', 
      endDate: '' 
     } 
     } 
    } 
    } 
    />) 
    expect(wrapper).toMatchSnapshot(); 
})