Reactjs фильтр массива модульного тестирования включает в себя не работает - PullRequest
Новая
       42

Reactjs фильтр массива модульного тестирования включает в себя не работает

0 голосов
/ 29 апреля 2020

Я пытаюсь проверить следующую функцию onColumnToggle, которая используется для переключения некоторых столбцов в таблице (используя Primereact Переключатель столбцов ): 

       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. Что я делаю неправильно? Функция работает, как и ожидалось в моем приложении.

1 Ответ

1 голос
/ 29 апреля 2020

Array.includes сравнивается по ссылке, поэтому возвращается false также для 2 переменных, имеющих одинаковый ключ / значения, но не являющихся одним и тем же объектом. В вашем случае я бы отфильтровал, явно сравнив свойства ваших объектов: 

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