Javascript 开玩笑地测试函数

我需要一些关于如何和什么测试函数的建议

说我有一些状态

state = {
  categories: [this is full of objects],
  products: [this is also full of objects]
}

那么我有这个功能：

  filterProducts = () => {
    return this.state.products.filter((product => (
      product.categories.some((cat) => (
         cat.title == this.state.chosenCategory
      ))
    )))
  }

此函数通过确定产品是否属于所选类别来过滤产品数组

你将如何测试这个

我试过这个

 let productsStub = [
    {id: 1, title: 'wine01', showDescription: false},
    {id: 2, title: 'wine02', showDescription: false},
    {id: 3, title: 'wine03', showDescription: false}
  ]
  wrapper = shallow(<Menu
    categories={categoriesStub}
    products={productsStub}
    />);


  it('should filter products when searched for', () => {
    const input = wrapper.find('input');
    input.simulate('change', {
      target: { value: '01' }
    });
    expect(productsStub.length).toEqual(1);
  });

让productsStub=[
{id:1，标题：'wine01'，showDescription:false}，
{id:2，标题：'wine02'，showDescription:false}，
{id:3，标题：'wine03'，showDescription:false}
]
包装器=浅（）；
它（'搜索时应过滤产品'，（）=>{
const input=wrapper.find（'input'）；
input.simulate（'change'{
目标：{value:'01'}
});
期望值（产品桶长）等于（1）；
});

这个测试（我想）的意思是，当我搜索01时，我希望产品状态（以及状态的存根）过滤并只返回1个结果。但是，测试失败，并表示预期：1收到：3，即过滤不起作用

我知道我也可以做

wrapper.instance.filterProducts（）

，但同样，我不太喜欢开玩笑地进行函数测试

有什么建议吗？如果能和别人聊天就好了

---

谢谢

我复制了您的问题陈述，但不确定您如何维护状态模型（道具/状态）。但这可能会有所帮助。：）

在此处签出工作示例：

从“React”导入React；
导出默认类Hello.Component{
状态={
类别：[{id:1}]，
产品：这个。道具。产品，
所选类别：1，
filteredProducts:[]
};
filterProducts=值=>{
让filteredVal=this.props.products.filter(
product=>product.id==parseInt（值）
);
这是我的国家({
filteredProducts:filteredVal
});
};
setValue=e=>{
这是我的国家({
所选类别：e.target.value
});
this.filterProducts（即target.value）；
};
render（）{
返回(
滤器
);
}
}
从“酶”中导入{shall}；
从“/Filter”导入筛选器；
从“React”导入React；
设productsStub=[
{id:1，标题：“wine01”，showDescription:false}，
{id:2，标题：“wine02”，showDescription:false}，
{id:3，标题：“wine03”，showDescription:false}
];
让包装器=浅（）；
它（“搜索时应过滤产品”，（）=>{
常量输入=wrapper.find（“输入”）；
输入。模拟（“更改”{
目标：{值：“1”}
});
expect（wrapper.state（）.filteredProducts.length）.toEqual（1）；
});

如果您能在或其他工具中提供代码，那就太好了，这样我们就可以讨论它了。@ChasingUnicorn您还需要什么代码？对不起？它只是一个过滤状态数组的函数，我想知道如何测试它。。？

import React from "react";

export default class Hello extends React.Component {
  state = {
    categories: [{ id: 1 }],
    products: this.props.products,
    selectedCat: 1,
    filteredProducts: []
  };

  filterProducts = value => {
    let filteredVal = this.props.products.filter(
      product => product.id === parseInt(value)
    );

    this.setState({
      filteredProducts: filteredVal
    });
  };

  setValue = e => {
    this.setState({
      selectedCat: e.target.value
    });
    this.filterProducts(e.target.value);
  };

  render() {
    return (
      <div>
        Filter
        <input value={this.state.selectedCat} onChange={this.setValue} />
      </div>
    );
  }
}


import { shallow } from "enzyme";
import Filter from "./Filter";
import React from "react";


let productsStub = [
  { id: 1, title: "wine01", showDescription: false },
  { id: 2, title: "wine02", showDescription: false },
  { id: 3, title: "wine03", showDescription: false }
];
let wrapper = shallow(<Filter products={productsStub} />);

it("should filter products when searched for", () => {
  const input = wrapper.find("input");
  input.simulate("change", {
    target: { value: "1" }
  });
  expect(wrapper.state().filteredProducts.length).toEqual(1);
});