Различия в монтаже компонентов при юнит-тестировании - PullRequest
0 голосов
/ 29 апреля 2019

Итак, я видел несколько подходов к отрисовке компонентов для модульных тестов с течением времени, рассматриваемая среда тестирования не имеет отношения к делу .. Я брожу Есть ли какие-либо преимущества или недостатки любого из следующих подходов?

Например, есть ли вероятность утечки памяти при любом из следующих подходов?

1-й подход, использующий общую переменную между всеми тестами и монтированием перед каждым. (основная проблема, которую я могу придумать, переопределить реквизиты компонентов по умолчанию, может быть сложной)

describe('some describe', () => {
    let component
    const baseProps = {}

    beforeEach(() => {
        component = shallow(<MyComponent {...baseProps} />)
    })

    it('test 1', () => {
        expect(component).to.something
    })

    it('test 2', () => {
        expect(component).to.something
    })
})

2-й подход, вызывая renderComponent в начале каждого теста, но все еще используя общую переменную

describe('some describe', () => {
    let component;

    function renderComponent(props = {}) {
        const baseProps = {}
        component = shallow(<MyComponent {...baseProps} {...props} />)
    }

    it('test 1', () => {
        const props = {}
        renderComponent(props)
        expect(component).to.something
    })

    it('test 2', () => {
        renderComponent()
        expect(component).to.something.else
    })
})

3-й подход, установка компонента в каждом тесте

describe('some describe', () => {
    const baseProps = {}

    it('test 1', () => {
        const props = {}
        const component = shallow(<MyComponent {...baseProps} {...props} />)
        expect(component).to.something
    })

    it('test 2', () => {
        const props = {}
        const component = shallow(<MyComponent {...baseProps} {...props} />)
        expect(component).to.something.else
    })
})

4-й подход с использованием вспомогательной функции, которая возвращает экземпляр для теста

describe('some describe', () => {
    function renderComponent(props = {}) {
        const baseProps = {}
        return shallow(<MyComponent {...baseProps} {...props} />)
    }

    it('test 1', () => {
        const component = renderComponent()
        expect(component).to.something
    })

    it('test 2', () => {
        const component = renderComponent()
        expect(component).to.something.else
    })
})

1 Ответ

1 голос
/ 29 апреля 2019

1 - component создается в beforeEach, поэтому его нельзя настроить тестом до его создания (как вы заметили).

2 - renderComponent работает через побочные эффекты ... лучше всего избегать их.

3 - отлично работает

4 - работает нормально ... предпочтительнее 2, поскольку renderComponent - чистая функция.


Все четыре ведут себя одинаково, поскольку Jest, Mocha и Jasmine все запускают beforeEach перехватчики перед любыми тестами в том же describe и запускают тесты в порядке, в котором они определены.

Все четыре используют только переменные, локальные для обратного вызова describe (а в 4 все еще более локализовано для тестового обратного вызова), пока ваш компонент очищается после себя (пример: очистить все таймеры, глобальные прослушиватели и т. Д.) в componentWillUnmount и вызовите unmount для вашего компонента) ни один из четырех не более подвержен утечкам памяти, чем другие.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...