在describe块和每个测试块中定义浅层之间的区别？

Question

假设我们有以下组件树：我的组件组件1组成部分2组件3

Mycomponent是所有者组件，包含三个子组件。

我们要检查的是每个单个组件是否正确呈现。

我可以通过如下所示使用浅层渲染来对此进行测试：

  it('renders <Component1 /> component', () => {
    const wrapper = shallow(<Mycomponent/>);
    expect(wrapper.find(Component1). length).toHavelengthOf(1);
  });

  it('renders <Component2 /> component', () => {
    const wrapper = shallow(<Mycomponent/>);
    expect(wrapper.find(Component2). length).toHavelengthOf(1);
 });

而不是为每个测试定义包装器，是否有可能在描述块范围内定义它，以便每个测试都可以到达该包装器，因此我不必为每个测试定义它？

Answer 1

您可以在shallow块中使用beforeEach。您最好为每个测试用例获得一个新的包装。这样每个测试用例的结果都不会受到影响。

例如

index.tsx：

import React, { Component } from 'react';

export const Component1 = () => <span>component 1</span>;
export const Component2 = () => <span>component 2</span>;
export const Component3 = () => <span>component 3</span>;

class MyComponent extends Component {
  render() {
    return (
      <div>
        <Component1></Component1>
        <Component2></Component2>
        <Component3></Component3>
      </div>
    );
  }
}

export default MyComponent;

index.test.tsx：

import MyComponent from './';
import { Component1, Component2, Component3 } from './';

import React from 'react';
import { shallow } from 'enzyme';

describe('59980692', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<MyComponent></MyComponent>);
  });
  it('renders <Component1 /> component', () => {
    expect(wrapper.find(Component1)).toHaveLength(1);
  });

  it('renders <Component2 /> component', () => {
    expect(wrapper.find(Component2)).toHaveLength(1);
  });
  it('renders <Component3 /> component', () => {
    expect(wrapper.find(Component3)).toHaveLength(1);
  });
});

单元测试结果：

 PASS  src/stackoverflow/59980692/index.test.tsx (15.157s)
  59980692
    ✓ renders <Component1 /> component (57ms)
    ✓ renders <Component2 /> component (4ms)
    ✓ renders <Component3 /> component (6ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        17.468s