写作时如何处理 TDD React/Redux

Question

我正在使用 TDD 编写 React/Redux 应用程序。问题是如何处理编写新应用程序的第一步，考虑到我想使用的所有样板文件。

根据 TDD，我应该只编写最少的代码才能通过我的测试，然后再进行重构。例如，我是否应该从没有 Redux 开始，然后重构并引入 Redux？考虑到 Redux 的样板文件（stores/reducers/wrapper 元素等）

，我将进行相当大的重构

我了解 TDD 方法的巨大优势。问题是，在那些情况下，是否有更好的方法是 "allowed" 使用比最小代码集更多的代码来通过测试..

Answer 1

我的首选方法是先测试 React，然后检查组件是否根据提供给它的 props 正确呈现。

像这样：

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')
  })
})

然后我会为 redux 添加测试，以检查状态是否根据提供给 reducer 的输入而改变。

最终还是看个人喜好了。

Answer 2

Redux 不会影响您编写最少的代码来通过每个单独测试的能力。

您的各个 React 组件只是使用 props 和 doing/displaying 东西。您对这些组件的单元测试不应该关心这些 props 是以标准 React 方式传递的，还是通过 react-redux 插入的。所以 Redux 的存在不会影响你用最少的代码通过 React 组件测试的能力。

有一些小的例外，例如将组件状态移动到 Redux 状态，或更改处理副作用的方式（例如从 API 获取数据）。这些类型的更改可能需要对您的测试进行一些更改，但如果有的话，它们可能会使它们更简单。

当然，如果你添加 Redux，你将不得不为新的 Redux reducers/action creators/selectors 等编写测试，但是编写这些测试非常简单。您不会重复任何工作：无论您是否开始使用 Redux，您编写测试所花费的时间都将大致相同。

关于使用或不使用 Redux 的一般概念：创建 Redux 的 Dan Abramov 建议从普通 React 开始，然后仅在发现需要时才添加 Redux。

写作时如何处理 TDD React/Redux

How to approach TDD when writing React/Redux

javascript

tdd

reactjs

redux