reactjs - 带有酶浅和安装的TDD？

Question

当我使用shallowor渲染一个组件时mount，该组件在内存中渲染并且不附加到 DOM。

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

如果我看不到我正在开发的组件是否看起来像它应该的那样，我应该如何进行测试驱动开发？（css样式，大小等）

Answer 1

如果您希望您的组件在“浏览器”中被渲染，那么请使用 Enzyme 的 render() 方法。确保有一个可用的窗口（参见 jsdom to fake a window）。但是 IMO，您应该能够使用浅层或挂载进行所有测试，API 很好

Answer 2

如果我看不到我正在开发的组件是否看起来像它应该的那样，我应该如何进行测试驱动开发？（css样式，大小等）

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