反应测试,我浪费时间试图不使用Redux?
我真的很迷茫。反应测试,我浪费时间试图不使用Redux?
我试图让我的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设为“无效信息”时的凭据是空白。我应该可以挂载组件并访问其实例()。onHandleClick() - 我想?
除了它不会让我直接装载它,因为我需要将它包装在MemoryRouter中,因为LoginForm根据凭证是否正确重定向。
当然,我可以
mount(<MemoryRouter><LoginForm /></MemoryRouter>);
...但我不能访问包装的实例()。onHandleClick()了,因为MemoryRouter没有的方法,这是一个孩子之内。
如果我的所有组件都不知道他们的方法做了什么,那么测试看起来会更容易100倍,它全部通过道具,我的测试嘲弄了每个功能......但是,如果我使用模拟方法测试所有组件,我是否会知道ACTUAL方法有效?
你已经足够了,Redux似乎是唯一的选择......但我有一个非常非常简单的CRUD应用程序,我不想过度复杂化它,我只是想能够测试我的组件!
请帮忙。
恕我直言,你应该使用Sinon
http://sinonjs.org/ 来测试这种事情,这里是一篇关于它的文章。 http://engineering.pivotal.io/post/stub-dont-shallow-render-your-child-components/
但基本上解决方案应该是来自sinon的stub()
和spy()
之间。
如果你想测试得到北斗来测试检查JEST
这是一个伟大的测试工具,基于snapshoots,所以你只需比较呈现的代码和假设的代码。它也是由Facebook推荐的。
我想加入终极版到组合将是这个逻辑可以进入减速机,它可以更容易地测试的优点,但也付出了代价。如果你发现你的组件太耦合在一起,也许他们需要重新组织一下。也许你可以添加'ref'到内部组件并从那里访问它? –