0

我正在尝试测试以下onColumnToggle函数，该函数用于切换表中的某些列（使用 Primereact 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每次都会评估。我究竟做错了什么？该功能在我的应用程序中按预期工作。

4

1 回答 1

1

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

let orderedSelectedColumns = columnProps.filter(obj => selectedColumns.some(b => b.field === obj.field && b.header === obj.header));
于 2020-04-29T13:26:23.197 回答