单元测试中安装组件的差异

时间:2019-04-29 07:50:23

标签: javascript unit-testing mocha jestjs enzyme

因此,随着时间的推移,我已经看到了多种方法来渲染用于单元测试的组件,所涉及的测试框架是不相关的。 我在徘徊以下任何一种方法是否有优点或缺点?

例如,以下任何一种方法都有可能发生内存泄漏吗?

第一种方法,在所有测试和每次测试之前的安装之间使用共享变量。 (我可以想到的主要问题是,覆盖默认的组件道具会很棘手)

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

第二种方法,在每次测试开始时调用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
    })
})

第三种方法,在每次测试中安装组件

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

第四种方法,使用一个为测试返回实例的辅助函数

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 个答案:

答案 0 :(得分:1)

1-component是在beforeEach中创建的,因此在创建之前无法通过测试对其进行自定义(如您所述)。

2-{{​​1}}通过副作用起作用……最佳实践是避免它们。

3-工作正常

4-可以正常工作...由于renderComponent是一个纯函数,因此最好使用2。


由于renderComponentJestMocha在相同的Jasmine中进行任何测试之前都运行beforeEach钩子,并在定义它们的顺序。

这四个变量都只使用describe回调的局部变量(在4个变量中,所有变量都更加局限在测试回调中),只要您的组件在其自身之后进行清理(例如:清除所有计时器,全局侦听器)等等,然后在describe中调用并在组件上调用componentWillUnmount),这四个都不比其他任何一个更容易发生内存泄漏。