测试 MobX 组件

Question

我面临一个问题，即如何在 Mobx 中测试我们要传递 props 的组件。我正在使用 Jest，我只想做一个简单的快照测试。

除了默认导出之外，我还使用仅组件的命名导出，因此@inject 和@observer 不会影响它。我应该只传递我自己的 'expenses' 和 'filters' 作为道具，但它不起作用。

所以这是我的组件。我将 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

好的。问题是组件顶部的装饰器。

在测试注入的组件时，使用浅层渲染不会提供任何有用的结果；只有注入器会被渲染。要使用浅层渲染进行测试，请实例化 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();
})

测试 MobX 组件

Testing MobX Component

testing

reactjs

jestjs

mobx