Question

我的反应组件是这样的，我使用getMenuItems方法渲染组件的一部分。

const TransactionListFilter = (props) => {
  const getMenuItems = () => filterCriteriaItems.map((data) =>
    <MenuItem value={data.valu} name={data.name} >{data.name}</MenuItem>,
  );
  return (
        <Dropdown
          className="Transaction-List-Filter-container-dropdown"
          selectMode="single"
          defaultText="See All"
          onMenuItemClick={handleFilterChange}
        >
          <Menu>
            {
              getMenuItems()
            }
          </Menu>
        </Dropdown>
  );
};

我如何测试方法getMenuItems的想法？

Answer 1

问题是您将方法getMenuItems隐藏为TransactionListFilter函数的内部工作。你确定要测试它吗？一旦重构TransactionListFilter方法，您的测试就会中断。据我所知，你有两个选择：

重构一堂课：

class TransactionListFilter {
    getMenuItems(){
        return filterCriteriaItems.map((data) =>
            <MenuItem value={data.valu} name={data.name}>{data.name}</MenuItem>,
    );
    }
    render() {
        return (
            <Dropdown
        className="Transaction-List-Filter-container-dropdown"
        selectMode="single"
        defaultText="See All"
        onMenuItemClick={handleFilterChange}
            >
            <Menu>
            {
                this.getMenuItems()
    }
    </Menu>
        </Dropdown>
    );
    }
};

函数的Hacky转换（例如，将函数转换为字符串，然后解析字符串直到返回，并将结果传递给Function构造函数）。这看起来像这样:(风险自负）

const getMenuItems = new Function('', `${TransactionListFilter.toString().match(/\getMenuItems.*=.*=>(.*)\)/s)[1]};`)

Test React无状态私有函数

1 个答案: