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

Question

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

Answer 1

Array.includes 通过引用进行比较，因此对于具有相同 key/values 但不是同一对象的 2 个变量，它也会 return false。在你的情况下，我会通过明确比较你的对象的属性来过滤：

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

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

Reactjs unit testing array filter includes not working

reactjs

jestjs

primereact