jeerjmin
@jeerjmin

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

Начинаю разбираться с тестированием и столкнулся с проблемой, прошу помочь.
Почему тест возвращает 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);
  });


});
  • Вопрос задан
  • 93 просмотра
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Как минимум у вас при попытке вызова 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);
  });
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы