reactjs - 在编写第三方组件包装器时我应该测试什么（如果有的话）？

Question

我认为标题是不言自明的，但以防万一：

假设我正在包装 Material Table，以便我可以简化 API 并标准化一些对我的应用程序有意义的事情。

我应该为这个包装器编写什么样的测试（如果有的话）？

我是否应该担心测试包装器，或者只专注于为实际实现（例如用户表）编写测试？

这是我的包装器的代码示例，只是为了提供一些上下文：

import ArrowDownward from '@material-ui/icons/ArrowDownward'
import Clear from '@material-ui/icons/Clear'
import Search from '@material-ui/icons/Search'
import MaterialTable from 'material-table'
import React, { forwardRef, ReactElement } from 'react'

export type Column<TData extends object> = {
  title: string
  field: string
  render?: (row: TData) => ReactElement
  searchable?: boolean
  sortable?: boolean
  defaultSort?: 'asc' | 'desc'
}

export type TableProps<TData extends object> = {
  columns: Array<Column<TData>>
  data: Array<TData>
  searchable?: boolean
}

export const Table: <TData extends object>(
  p: TableProps<TData>
) => ReactElement<TableProps<TData>> = ({ columns, data, searchable }) => {
  const materialTableColumns = columns.map((column) => ({
    ...column,
    sorting: column.sortable
  }))
  const isToolbarVisible = searchable || false

  return (
    <MaterialTable
      columns={materialTableColumns}
      data={data}
      icons={{
        ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
        Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
        SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />)
      }}
      localization={{
        body: {
          emptyDataSourceMessage: 'No records found'
        },
        toolbar: {
          searchTooltip: 'Quick Find',
          searchPlaceholder: 'Quick Find'
        }
      }}
      options={{
        draggable: false,
        headerStyle: {
          backgroundColor: '#E9E9E9'
        },
        paging: false,
        search: searchable || false,
        searchFieldAlignment: 'left',
        showTitle: false,
        toolbar: isToolbarVisible
      }}
    />
  )
}

标签： reactjstestingjestjsenzymematerial-table