Question

当我使用shallow或mount渲染组件时，组件将在内存中呈现，并且不会附加到DOM。

这意味着，在我运行测试时，我实际上并未在浏览器中看到任何输出。

如果我不能看到我正在开发的组件看起来应该如何，我应该如何进行测试驱动开发？（css风格，尺寸等）

Answer 1

如果您希望将组件渲染为“浏览器”，而不是使用Enzyme的render（）方法。一定要有一个窗口（请参阅jsdom来伪造一个窗口）。但IMO，您应该可以使用浅或mount进行所有测试，API很不错

Answer 2

如果我看不到，我该如何进行测试驱动开发？我正在开发的组件看起来应该如何？（css风格，尺寸等）

Enzyme的目的不是视觉回归测试，因为你必须使用像PhantomJS这样的工具，相关文章https://css-tricks.com/visual-regression-testing-with-phantomcss/

您可以通过检查组件在呈现时是否具有正确的选择器来实现某种样式测试。 e.g。

it( 'should add the "selected" class when a click happend to one of the Elements', () => {
    const wrapper = mount( <Elements /> );

    const option = wrapper.find( 'h5' );
    expect( option.hasClass( 'selected' ) ).to.equal( false );
    option.simulate( 'click' );
    expect( option.hasClass( 'selected' ) ).to.equal( true );
} );

TDD与酶浅和挂？

2 个答案: