Различия между определением мелочи в описательном блоке и в каждом тестовом блоке? - PullRequest
Новая
       22

Различия между определением мелочи в описательном блоке и в каждом тестовом блоке?

0 голосов
/ 30 января 2020

Допустим, у нас есть следующее дерево компонентов: Mycomponent Component 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);
 });

Вместо определения оболочки для каждого теста, можно определить ее в блоке описания объем, чтобы каждый тест мог достичь этой оболочки, поэтому мне не нужно определять его для каждого теста?

1 Ответ

0 голосов
/ 03 февраля 2020

Вы можете использовать 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
...