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

Question

Lets say we have the following component tree: Mycomponent Component 1 Component 2 Component 3

Mycomponent is the owner component and contains three child components.

The thing we want to check is if the each single component renders correctly.

I can test this by using shallow rendering as following:

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

Instead of defining wrapper for each test, is it possible to define it in describe block scope so each test can reach that wrapper so i dont have to define it for each test?

Answer 1

You can use shallow in beforeEach block. You'd better get a new wrapper for each test case. So that the results of each test case will not be affected. Maintain good isolation between test cases.

Eg

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

unit test results:

 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