酶浅渲染redux组件中的一个节点答案

【问题标题】：enzyme shallow rendering just one node in redux components酶浅渲染redux组件中的一个节点
【发布时间】：2018-04-03 04:28:18
【问题描述】：

如果我使用模拟存储渲染 redux 组件，酶浅层渲染的行为会出乎意料。

我有一个看起来像这样的简单测试：

  import React from 'react';
  import { shallow } from 'enzyme';
  import { createMockStore } from 'redux-test-utils';

  import Test from './Test'

  it('should render ', () => {
    const testState = {
      app: {
        bar: ['a', 'b', 'c']
      }
    };

    const store = createMockStore(testState)
    const context = {
      store,
    };
    const shallowComponent = shallow(<Test items={[]}/>, {context});

    console.log(shallowComponent.debug());

  }

Test 组件如下所示：

class Test extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <div className="here"/>
    )
  }
}
export default Test;

正如预期的那样打印出这个：

 <div className="here" />

但是，如果我的组件是 redux 组件：

class Test extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <div className="here"/>
    )
  }
}
const mapStateToProps = state => {
  return {
    barData: state.app.bar
  }
}

export default connect(
  mapStateToProps
)(Test)

那么我在控制台中得到的是这样的：

<BarSeriesListTest items={{...}} barData={{...}} dispatch={[Function]} />

为什么会有这种差异？如何测试我的组件是否在我的组件的 redux 版本中嵌入了 <div className="here"/>？

【问题讨论】：

这可能会对您有所帮助 github.com/reactjs/redux/issues/1534 。向下滚动，您会看到一个带有很多 + 的评论

标签： reactjs react-redux enzyme

【解决方案1】：

您引用的是 connect 返回的 HOC，而不是您要测试的组件。

您应该使用酶的dive 函数，该函数将渲染子组件并将其作为包装器返回。

const shallowComponent = shallow(<Test items={[]}/>, {context}).dive();

如果您需要深入了解多个组件，则可以多次使用它。它也比使用 mount 更好，因为我们仍在隔离测试。

【讨论】：

【解决方案2】：

你应该导出未连接的组件并单独测试它（注意第一个export）：

export class Test extends React.Component {

}
...
export default connect(
  mapStateToProps
)(Test)

在您的测试中，您应该像这样测试未连接组件的渲染（注意{ Test } 周围的花括号）：

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import { Test } from './Test';

describe('...', () => {
  it('...', () => {
    const wrapper = shallow(<Test />)
    expect(toJson(wrapper)).toMatchSnapshot();
  })
})

希望这会有所帮助。

专门针对您描述的情况的模式组件应该是：

import React from 'react';
import { connect } from 'react-redux';

export class Test extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <div className="here"/>
    )
  }
}
const mapStateToProps = state => {
  return {
    barData: state.app.bar
  }
}

export default connect(
  mapStateToProps
)(Test)

测试规范应该是：

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import { Test } from 'Test';

describe('Test component', () => {
  it('renders', () => {
    const wrapper = shallow(<Test />);
    expect(toJson(wrapper)).toMatchSnapshot();
  });
});

生成以下快照：

exports[`Test component renders 1`] = `
<div
  className="here"
/>
`;

【讨论】：

【解决方案3】：

默认情况下，您正在导出连接的组件。你可以做的是导入没有连接redux的组件。

import { Test } from './Test';

那么你的测试应该可以工作了。

【讨论】：