Question

我真的，真的迷路了。

我正在努力保持我的React应用程序简单。我认为我们不需要基于应用范围的Redux。然而，当谈到测试时，似乎我必须通过这么多的箍来获得良好的覆盖率。看起来很荒谬，我脑子里肯定错了。请帮忙吗？

例如，

class LoginForm extends Component {...}

onHandleClick(e) {
  if (this.state.username === '' && this.state.password === '') {
    this.setState({ error: 'Invalid details', });
  } else {
    this.setState({ error: '', });
  }
}

我想编写一个测试，确保在凭据为空时将state.error设置为“Invalid details”。我应该能够挂载组件并访问它的实例（）。onHandleClick（） - 我想？

除此之外，它不会让我直接挂载它，因为我需要将它包装在MemoryRouter中，因为LoginForm会根据正确的凭据进行重定向。

当然，我可以

mount(<MemoryRouter><LoginForm /></MemoryRouter>);

...但是我不能再访问包装器的instance（）。onHandleClick（），因为MemoryRouter没有方法，它在一个孩子中。

如果我的任何组件都不知道他们的方法是什么，看起来测试会变得容易100倍，这些都是在道具中传递的，我的测试模拟了每个函数......但是，畏缩，怎么会我知道如果我使用模拟方法测试我的所有组件，ACTUAL方法是否有效？

你把它拿得足够远，Redux似乎是唯一的选择...但我有一个非常非常简单的CRUD应用程序，我不想让它过于复杂，我只是想能够测试我的组件！

请帮忙。

Answer 1

恕我直言，你应该使用Sinon http://sinonjs.org/ 为了测试那种东西，这里有一篇关于它的文章。 http://engineering.pivotal.io/post/stub-dont-shallow-render-your-child-components/

但基本上解决方案应该在sinon的stub()和spy()之间。

如果你想测试get dipper进行测试，请查看JEST这是一款基于snapshoots的优秀测试工具，因此您只需将呈现的代码与假设的代码进行比较即可。它也被Facebook推荐。

https://facebook.github.io/jest/

反应测试，我是否在浪费时间尝试不使用Redux？

1 个答案: