Testing MobX Component - reactjs

Question

I am facing an issue of how to test a component in Mobx that we are passing props to.
I am using Jest and I just want to make a simple snapshot test.
Next to default export I am also using named export of just the component so #inject and #observer don't influence it. I should just pass my own 'expenses' and 'filters' as a prop but it is not working.
So this is my component. I am passing RootStore as a prop to that component.
ExpenseList Component
#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();
})
This is my 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. The problem were decorators at the top of the component.
Using shallow rendering won't provide any useful results when testing injected components; only the injector will be rendered. To test with shallow rendering, instantiate the 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();
})