Reactjs单元测试数组过滤器包括不工作

Question

我正在尝试测试以下onColumnToggle函数，该函数用于切换表中的某些列(使用Primreact Column Toggler(：

constructor() {
super();
this.state = {
selectedColumns: []
}
}
componentDidMount() {
this.setState({
selectedColumns: this.props.columnProps,
})
}
onColumnToggle(event) {
let selectedColumns = event.value;
let orderedSelectedColumns = this.props.columnProps.filter(obj => selectedColumns.includes(obj));
this.setState({selectedColumns: orderedSelectedColumns});
}

我的应用程序中的函数运行良好，切换的工作方式与文档中的类似。我在测试这个方法时遇到了一些困难。目前我有以下内容：

describe('MyComponent', () => {
let wrapper;
let instance;
beforeEach(() => {
MyComponent.defaultProps = {
columns: [
{field: 'vin', header: 'Vin'},
{field: 'year', header: 'Year'},
{field: 'brand', header: 'Brand'},
{field: 'color', header: 'Color'}
]
};
wrapper = shallow(<MyComponent columnProps={MyComponent.defaultProps.columns}/>);
instance = wrapper.instance();
jest.clearAllMocks();
});
describe('onColumnToggle function', () => {
it('should change "selectedColumns" state', () => {
const columnMock = {
value: [
{field: 'year', header: 'Year'},
{field: 'brand', header: 'Brand'}
]
}
instance.onColumnToggle(columnMock);
expect(wrapper.state('selectedColumns')).toEqual(columnMock.value)
})
})

我期望我的selectedColumns状态变为等于我的columnMock值。相反，我得到了以下错误：

Error: expect(received).toEqual(expected) // deep equality
- Expected
+ Received
- Array [
-   Object {
-     "field": "year",
-     "header": "Year",
-   },
-   Object {
-     "field": "brand",
-     "header": "Brand",
-   },
- ]
+ Array []

调试该问题表明，onColumnToggle函数的过滤部分没有过滤出两个数组中的公共值，orderedSelectedColumns返回一个空数组。如果我控制台日志selectedColumns.includes(obj)，那么它每次都计算为false。我做错了什么？该函数在我的应用程序中按预期工作。

Answer 1

Array.includes通过引用进行比较，因此对于具有相同键值但不是同一对象的两个变量，它也将返回false。在你的情况下，我会通过显式比较你的对象的属性来过滤：

let orderedSelectedColumns = columnProps.filter(obj => selectedColumns.some(b => b.field === obj.field && b.header === obj.header));