如何运行测试并恢复以前的组件状态

Question

我正在我的react组件上运行一些测试。

在我的describe中我有多个it。

如下所示：

describe('Check Component', () => {


  let wrapper;
  it('Init component', () => {
    wrapper = mount(
      <Component/>
    )
  });

  it('+ Check filter : select years options', () => {
    expect(wrapper.find('select[name="year"] > option')).toHaveLength(3)
  });


  it('+ Check change tab : personal stats', () => {
    wrapper.find('.tabs > .tab.personal').simulate('click');
    expect(wrapper.find('.tabs > .tab.personal').hasClass('selected')).toBeTruthy()
  });

 //many more it




});

在我的组件上，我有一些按钮来过滤一个列表，那些由simulate()触发的操作改变了我的组件的初始dom树，这迫使我执行相反的操作来恢复到他的初始状态，以执行更多的测试，如果我有很多过滤器，这会导致很多“回滚”。

如何恢复或隔离测试？

Answer 1

您可以在每次测试之前使用beforeEach()获取包装器的新版本

describe('Check Component', () => {
  let wrapper;
  beforeEach(()=>{
    wrapper = mount <Component />
  })
  it(...)