Тестирование в React, в чем ошибка?

Question

[mr jeery]

Начинаю разбираться с тестированием и столкнулся с проблемой, прошу помочь.
Почему тест возвращает false?

1 failing

  1) <Balance />
       Balance test:

      AssertionError: expected false to equal true
      + expected - actual

      -false
      +true

Вот компонент к которому я собираюсь написать тест.

export  class BalanceCont extends React.Component {

   render() {

    const tifOptions = Object.keys(this.props.total).filter(key =>
      this.props.total[key]!='0'
    ).map(key =>
      <div className="balance__list" value={key}><b>{key}</b>: {parseFloat(this.props.total[key].toFixed(5))}</div>
  )


    return(

      <div id="foo" className="balance__cont">

        <h3>Мои балансы</h3>
        {tifOptions}
      </div>
    )


    }
  }

  const mapStateToProps = state => ( { total: (state.total)  } );

  export const Balance = connect(mapStateToProps)(BalanceCont);

Вот тест кода:

import React from 'react';
import { shallow, mount } from 'enzyme';
import { expect } from 'chai';
import configureStore from 'redux-mock-store';

import {Balance} from '../app/containers/balance/src/balance';

const mockStore = configureStore();


describe('<Balance />', () => {

  let store = mockStore({});

	it('Balance test', function () {

		const wrapper = shallow(<Balance store={store}  />);
    expect(wrapper.contains(<h3>Мои балансы</h3>)).to.equal(true);
  });


});

Answer 1

[Антон Спирин]

Как минимум у вас при попытке вызова render выпадает ошибка:
Cannot convert undefined or null to object
Так как вы не передаете total в store.
Зачем вам вообще оборачивать компонент в connect при тестировании?
Попробуйте изменить файл компонента так:

import React from 'react';
import { connect } from 'react-redux';

export class Balance extends React.Component {
  // some code
}

const mapStateToProps = ({ total }) => ({ total });

export default connect(mapStateToProps)(Balance);

То, что вы назвали компонент BalanceCont, семантически неверно. Так как контейнер это HOС поверх вашего компонента, вызовом connect вы оборачиваете компонент в контейнер.

Теперь вы можете импортировать компонент для тестов, как:
import { Balance } from './Balance';
А контейнер в приложение как:
import Balance from './Balance';

Измененный тест:

import React from 'react';
import { shallow, mount } from 'enzyme';
import { expect } from 'chai';
import { Balance } from '../app/containers/balance/src/balance';

describe('<Balance />', () => {
  it('Balance test', function () {
    
    const mockTotal = { /* mock code */ };
    
    const wrapper = shallow(<Balance total={mockTotal} />);
    expect(wrapper.contains(<h3>Мои балансы</h3>)).to.equal(true);
  });
});

Comments

[mr jeery]

Антон Спирин Все очень полезно, спасибо.
В какой-то момент у меня появилась ошибка.

Invariant Violation: Could not find "store" in either the context or props of "Connect(Balance)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(Balance)".
Нашел решение с передачей store и redux-mock-store.
Спасибо, возможно в будущем встретяться какие-то задач где нужно будет использовать redux-mock-store, но ваш подход куда лучше.

У меня остался вопрос.
Импортируя { Balance }
и объявляя wrapper без total

const wrapper = shallow(<Balance />);
Будет ошибка
TypeError: Cannot convert undefined or null to object


Почему ?? Мы же в тесте не взаимодействуем с total

[Антон Спирин]

mr jeery, в методе render у вас код:

const tifOptions = Object.keys(this.props.total).filter(key =>
      this.props.total[key]!='0'
    ).map(key => (
      <div className="balance__list" value={key}>
        <b>{key}</b>: {parseFloat(this.props.total[key].toFixed(5))}
     </div>
  ));

при отрисовке он выполняется и вызов Object.keys(this.props.total) спровоцирует ошибку, так как this.props.total в будет undefined
Демо.