How to approach TDD when writing React / Redux

Question

I am writing a React / Redux application using TDD. The question is how to approach the first steps when writing new applications, given all the patterns that I want to use.

According to TDD, I have to write only minimal code to pass my test, and only then refactoring. Should I start without Redux, for example, and then refactor and inject Redux? I will have quite a lot of refactoring, given the Redux patterns (stores / gearboxes / wrapping elements, etc.).

I understand the enormous benefits of the TDD approach. The question is whether the "permitted" should use more than a minimal set of code to pass the test in these cases.

Answer 1

Redux will not interfere with your ability to write minimal code to pass each individual test.

Your individual React components just take props and do / display something. Testing the modules for these components should not worry if these details are transferred in the standard React way or inserted using a reaction reduct. Therefore, having Redux will not affect your ability to pass React test cases with minimal code.

There are some minor exceptions, such as moving a component’s state to Redux or changing the way it handles side effects (for example, fetching data from an API). These types of changes may require some changes in your tests, but they will most likely simplify them.

, Redux, Redux-// .., . - : , , , Redux.

Redux: , Redux, React, Redux , , .

Answer 2

- , , .

- :

import {App} from '../../src/containers/App';
import React from 'react';
import ReactDOM from 'react-dom';
import {
  renderIntoDocument,
  scryRenderedDOMComponentsWithTag
} from 'react-addons-test-utils';
import {expect} from 'chai';

describe('Main page',() => {
  it('should show a sign-in page if isAuthenticated is false',() => {
    const component = renderIntoDocument(
      <App isAuthenticated={false}/>
    );

    const buttons = scryRenderedDOMComponentsWithTag(component,'button')

    expect(buttons.length).to.be.equal(1)

  });

  it('should show a welcome text if isAuthenticated is true',() => {
    const component = renderIntoDocument(
      <App isAuthenticated={true}/>
    );
    const text = scryRenderedDOMComponentsWithTag(component,'h1')
    expect(text).to.have.string('welcome')
  })
})

, , , .

.