javascript - 带 d3 图表的 enzyme 测试支架

Question

我正在使用 Enzyme 测试 d3 图表组件。我遇到一个问题，d3.select 找不到容器 div 以及这个错误消息:

TypeError: Cannot read property 'getAttribute' of null

这是我的代码:

图表组件文件:ProgramMeasureTrendsComponent.js

  class ProgramMeasureTrendsComponent extends Component {
        constructor(props){
            super(props);
        }

        render() {
            return (
                <div className='programTrendChartContainer'></div>
               **this is the d3 container div that d3 select cannot find.**
            )
        }

        componentDidMount() {
            this.createBarChart()
           **use componentDidMount to render d3 chart.**
        }

        createBarChart() {
                let { parsedData,xAxisKeys,chartTitle,width,height,
                        marginTop,marginLeft,marginBottom,marginRight } = this.props;
                let keys = Object.keys(parsedData[0]).slice(0, 5);
                let container = d3.select('.programTrendChartContainer');<=== getting error at this line
    ......

测试用例文件:

describe('<ProgramMeasureTrendsComponent />', () => {
    it('Renders  ProgramMeasureTrends Component', () => {
        let store = mockStore({"dashboard":{"main":{"currentPeriod":"MONTH"}}});

        const input =  [
            {
                month:"Jan",
                elevated:0,
                group:"1486022400000",
                hyperCrisis:0,
                hyperStage1:0,
                hyperStage2:0,
                normal:0,
                total:0
            },
            {
                month:"Feb",
                elevated:0,
                group:"1488441600000",
                hyperCrisis:0,
                hyperStage1:0,
                hyperStage2:0,
                normal:0,
                total:0
            },
            {
                month:"Mar",
                elevated:0,
                group:"1491116400000",
                hyperCrisis:0,
                hyperStage1:0,
                hyperStage2:0,
                normal:0,
                total:0
            },
            {
                month:"Apr",
                elevated:0,
                group:"1493708400000",
                hyperCrisis:0,
                hyperStage1:0,
                hyperStage2:0,
                normal:0,
                total:0
            }

        ]
        let container = mount( <ProgramMeasureTrendsComponent
                                store={store}
                                parsedData = { input }
                                xAxisKeys = {["Jan","Feb","Mar","Apr"]}
                                chartTitle = 'd3 chart title'
                                width = '400'
                                height = '400'
                                marginTop = '20'
                                marginBottom = '20'
                                marginLeft = '20'
                                marginRight = '20'
                              />);

        container.debug();  

    });
})

错误输出

<ProgramMeasureTrendsComponent /> Renders  ProgramMeasureTrends Component:
     TypeError: Cannot read property 'getAttribute' of null
      at Selection.selection_attr [as attr] (node_modules/d3-selection/build/d3-selection.js:590:16)
      at ProgramMeasureTrendsComponent.createBarChart (src/modules/dashboard/main/components/ProgramMeasureTrendsComponent.js:47:30)
      at ProgramMeasureTrendsComponent.componentDidMount (src/modules/dashboard/main/components/ProgramMeasureTrendsComponent.js:28:14)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:264:11
      at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
      at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:80:26)
      at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:206:25)
      at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:153:16)
      at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:126:15)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
      at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:320:18)
      at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
      at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23)
      at Object.renderIntoDocument (node_modules/react-dom/lib/ReactTestUtils.js:91:21)
      at renderWithOptions (node_modules/enzyme/build/react-compat.js:200:24)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:94:59)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Context.<anonymous> (test/modules/dashboard/ProgramMeasureTrendsComponent.spec.js:53:25)

在我的应用程序中，此图表正确呈现，没有任何错误，但当我对其进行测试时，显示了上述错误。

我的猜测是在 Enzyme 的测试过程中调用 componentDidMount() 时容器 div 没有被渲染。

Enzyme 的组件生命周期是否与 React 生命周期不同？

Answer 1

Enzyme 仅限于 React 公开的内容，并且 React 不知道附加的元素。

https://github.com/airbnb/enzyme/blob/master/docs/common-issues.md#testing-third-party-libraries