TDD with Enzyme shallow and mount？

Question

当我使用 shallow 或 mount 渲染组件时，该组件在内存中渲染并且未附加到 DOM。

这意味着，虽然我运行我的测试，但实际上我在浏览器中看不到任何输出。

如果我看不到我正在开发的组件是否符合预期，我应该如何进行测试驱动开发？（css 款式、尺码等）

Answer 1

如果您希望您的组件在 "browser" 中被渲染为挂载的，那么请使用 Enzyme 的 render() 方法。确保有可用的 window（请参阅 jsdom 伪造 window）。但是 IMO，您应该能够使用 shallow 或 mount 进行所有测试，API 很好

Answer 2

How am I supposed to do Test Driven Development if I can't see if the component I'm developing looks as it should? (css style, sizes etc)

Enzyme 的目的不是视觉回归测试，为此您将不得不使用 PhantomJS 等工具，相关文章 https://css-tricks.com/visual-regression-testing-with-phantomcss/

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

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 with Enzyme shallow and mount？

TDD with Enzyme shallow and mount?

reactjs

enzyme