我应该使用beforeEach（）进行安装并为每个测试设置道具还是在每个测试开始时安装特定组件？ （使用酶，柴和摩卡咖啡）

Question

我最近开始编程。我在一个使用React进行编程的团队中，并使用Enzyme，Mocha和Chai进行单元测试。请参阅下面的软件包版本。

在测试有多个用例需要不同prop值的组件时，我应该在每个测试中使用beforeEach（）然后使用setProps（），还是应该在以下位置执行显式mount（）（或shallow（））：每次测试的开始？有关系吗？

例如，我可以在没有任何道具的情况下使用beforeEach（）进行安装，然后在每个测试中使用setProps（）这样（使用伪代码）：

describe('MyComponent', () => {

   beforeEach(... let component = mount(<MyComponent />) ...)

   it('tests use case 1', () => {
      // set prop A = 123
      component.setProps({A: 123})
      // assert some stuff
   })

   it('tests use case 2, () => {
      // set prop A = 456 and B = 'foo'
      component.setProps({A: 456})
      component.setProps({B: 'foo'})
      // assert some stuff
   })

})

或者我可以在每次测试开始时进行特定于用例的安装，在安装中传递道具，如下所示：

describe('MyComponent', () => {

   it('tests use case 1', () => {
      ...mount(<MyComponent A=123 />)
      // assert some stuff
   })

   it('tests use case 2, () => {
      ...mount(<MyComponent A=456 B='foo' />)
      // assert some stuff
   })

})

每种方法的优缺点是什么？有最佳实践吗？

包装

• “酶”：“ ^ 3.3.0”，
• “ enzyme-adapter-react-16”：“ ^ 1.1.1”，
• “摩卡”：“ ^ 5.0.0”，
• “柴”：“ 3.5.0”

Answer 1

对于类组件，有componentDidMount和constructor，而对于功能组件，有useEffect(..., [])。所有这些事情仅被调用一次。

在方法2的另一面，仍然需要在单独的测试用例中测试道具更新，以确保组件正确处理。否则，您可能会错过以下情况：说在不同的<Route>中使用相同的组件不会获取导航数据（仅发生在componentDidMount中）

说，如果有

<Route path="/Album/:id/author" component={UserScreen} />
<Route path="/user/:id/" component={UserScreen} />

，如果您可以直接从第一导航到第二，则意味着React-Router不会重新创建UserScreen，而只是更新已经渲染的实例。因此，使用方法1时，您将自动通过测试覆盖这种情况。尽管方法2需要您明确测试componentDidUpdate的行为。

我不确定有什么更好的方法，但想强调一下测试流程和实际项目流程之间可能会发生差异。