我应该使用beforeEach()进行安装并为每个测试设置道具还是在每个测试开始时安装特定的组件? (使用酶，柴和摩卡咖啡) [英] Should I mount using beforeEach() and set props for each test or mount a specific component at the start of each test? (using Enzyme, Chai and Mocha)

问题描述

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

I've recently starting programming. I'm on a team who is programming in React and is using Enzyme, Mocha and Chai for unit testing. See package versions below.

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

When testing a component where there are several use cases that require different prop values, should I use beforeEach() and then setProps() in each test, or should I do an explicit mount() (or shallow()) at the start of each test? Does it matter?

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

For example, I could use beforeEach() to mount without any props and then use setProps() in each test like this (using pseudocode):

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

})

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

or I could do a use-case specific mount at the start of each test, passing in props in the mount, like this:

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

})

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

What are the pros and cons of each method? Is there a best practice?

包装

• 酶":"^ 3.3.0"，
• "enzyme-adapter-react-16":"^ 1.1.1"，
• 摩卡":"^ 5.0.0"，
• 柴":"3.5.0"

推荐答案

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

For class components there is componentDidMount and constructor while for functional components there is useEffect(..., []). All that things are called just once.

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

On the other side for approach #2 it's still needed to test props update in separate test case to ensure component handles that properly. Otherwise you may miss the case when say using the same component in different <Route> does not fetch data on navigation(that happen in componentDidMount only)

说，如果有

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

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

and if you can navigate directly from first to second it means React-Router will not re-create UserScreen but just update instance already rendered. So with approach #1 you would cover this case with tests automatically. While approach #2 will need you testing componentDidUpdate behavior explicitly.

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

I'm not sure what's better but want to highlight that difference may happen between testing flow and real-project-flow.

这篇关于我应该使用beforeEach()进行安装并为每个测试设置道具还是在每个测试开始时安装特定的组件? (使用酶，柴和摩卡咖啡)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！