Question

我有一个反应表，在行上同时具有click和doubleclick事件，这需要使用计时器才能使这两个事件都起作用。

单击事件会在状态中选择一行，因此我必须在单元测试中使用计时器来正确检查状态更改。然后，我尝试再次模拟对行的点击，但得到Uncaught [Invariant Violation: Unable to find node on an unmounted component.]

在添加计时器逻辑之前，测试通过得很好，因此即使在回调之前我不调用done（），我也只能假定在调用计时器回调之前已以某种方式卸载了该组件。

也许这行不通吗？

我的pacakge.json：

"react": "^16.8.6",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.13.1",
"jest": "^22.4.4"

我要测试的代码：

let timer;
const delay = 200;
// extraneous stuff removed
return {
  onClick: e => {
  timer = setTimeout(() => {
    if (!prevent && rowInfo && rowInfo.row) {
        this.setSelectedRecord(rowInfo.original);
        this.props.onSelect && this.props.onSelect(rowInfo.original[primaryKey]);
    }
      prevent = false;
    }, delay);
  },
  onDoubleClick: e => {
    clearTimeout(timer);
    prevent = true;
    if (rowInfo && rowInfo.row) {
      this.setSelectedRecord(null);
      this.props.onDoubleClick && this.props.onDoubleClick(rowInfo.original[primaryKey]);
    }
  }
};

失败的单元测试：

  it('selects row on single click', async (done) => {
        const mockCallback = jest.fn();
        const newProps = {...props, data: data, schema: schema, onSelect: mockCallback};
        const wrapper = mount(<QueryRecordsTable {...newProps} />);
        const rows = wrapper.find(Tooltip);
        // 3 fields * 2 records
        expect(rows.length).toEqual(6);
        rows.at(0).simulate('click');
        setTimeout(() => {
            expect(mockCallback.mock.calls[0][0]).toEqual(ID1);
            expect((wrapper.state() as any).selectedRecord.ID).toEqual(ID1);
            expect(wrapper).toMatchSnapshot();
            const rows2 = wrapper.find(Tooltip);
            rows2.at(3).simulate('click');
        }, 300);
    });

当从回调中调用模拟时，我得到了：

 Error: Uncaught [Invariant Violation: Unable to find node on an unmounted component.]
        at reportException (D:\mdm\mdm-ui\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
        at Timeout.callback [as _onTimeout] (D:\mdm\mdm-ui\node_modules\jsdom\lib\jsdom\browser\Window.js:680:7)
        at ontimeout (timers.js:458:11)
        at tryOnTimeout (timers.js:296:5)
        at Timer.listOnTimeout (timers.js:259:5) { Invariant Violation: Unable to find node on an unmounted component.
        at invariant (D:\mdm\mdm-ui\node_modules\react-dom\cjs\react-dom.development.js:55:15)
        at findCurrentFiberUsingSlowPath (D:\mdm\mdm-ui\node_modules\react-dom\cjs\react-dom.development.js:4166:7)
        at findCurrentHostFiber (D:\mdm\mdm-ui\node_modules\react-dom\cjs\react-dom.development.js:4235:23)
        at findHostInstanceWithWarning (D:\mdm\mdm-ui\node_modules\react-dom\cjs\react-dom.development.js:20629:21)
        at Object.findDOMNode (D:\mdm\mdm-ui\node_modules\react-dom\cjs\react-dom.development.js:21138:14)
        at mapper (D:\mdm\mdm-ui\node_modules\enzyme-adapter-react-16\build\ReactSixteenAdapter.js:304:61)
        at _nodeToHostNode (D:\mdm\mdm-ui\node_modules\enzyme-adapter-react-16\build\ReactSixteenAdapter.js:313:10)
        at ReactSixteenAdapter.nodeToHostNode (D:\mdm\mdm-ui\node_modules\enzyme-adapter-react-16\build\ReactSixteenAdapter.js:906:21)
        at Object.simulateEvent (D:\mdm\mdm-ui\node_modules\enzyme-adapter-react-16\build\ReactSixteenAdapter.js:532:31)
        at ReactWrapper.<anonymous> (D:\mdm\mdm-ui\node_modules\enzyme\build\ReactWrapper.js:953:29)
        at ReactWrapper.single (D:\mdm\mdm-ui\node_modules\enzyme\build\ReactWrapper.js:1720:25)
        at ReactWrapper.simulate (D:\mdm\mdm-ui\node_modules\enzyme\build\ReactWrapper.js:952:21)
        at setTimeout (D:\mdm\mdm-ui\src\components\SelectRecords\__tests__\QueryRecordsTable.test.tsx:67:25)
        at Timeout.callback [as _onTimeout] (D:\mdm\mdm-ui\node_modules\jsdom\lib\jsdom\browser\Window.js:678:19)
        at ontimeout (timers.js:458:11)
        at tryOnTimeout (timers.js:296:5)
        at Timer.listOnTimeout (timers.js:259:5) name: 'Invariant Violation', framesToPop: 1 }

不变违规：当使用带有酶的计时器时，无法在未安装的组件上找到节点

0 个答案: