Question

//test.js
const map = {};
  document.addEventListener = jest.fn((event, cb) => {
    map[event] = cb;
  });
const wrapper = mount(<AccordianDropdown />);

it('Should not close dropdown on document click inside', () => {
    map.click({
      target: <div role="button"/>,
    });
  });

这是我的index.js文件：-

   // index.js
    componentDidMount() {
        document.addEventListener('click', this.closeOnDocumentClick);
      }

      componentWillUnmount() {
        document.removeEventListener('click', this.closeOnDocumentClick);
      }

    closeOnDocumentClick = (e) => {
        // If event happened in the dropdown, ignore it
        if (!(this.ref && isFunction(this.ref.contains) && this.ref.contains(e.target)) && this.state.open) {
          this.setState({ open: false });
        }
      };

在运行测试时遇到此错误TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.。请帮助我了解如何测试这段代码。

Answer 1

确定找到了解决方案，

在包装对象中，调用getDOMNode()方法以获取DOM节点元素。如果您将此元素作为event.target值传递。您不会例外。

否则，您可以使用JSDOM创建一个元素

const dom = new JSDOM();
const newDiv = dom.window.document.createElement("div");

然后


    test('...', () => {
        const mockedEvent = { target: wrapper.getDOMNode()[0] };
        wrapper
            .find('ClickAwayListener')
            .props()
            .onClickAway(mockedEvent);
    });

或如果只想避免该异常，请TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.将null作为目标传递给模拟事件或事件回调处理程序。

    test('...', () => {
        const mockedEvent = { target: null };
        wrapper
            .find('ClickAwayListener')
            .props()
            .onClickAway(mockedEvent);
    });

希望此代码对您有帮助。

在玩笑/酶中将e.target作为DOM节点发送

1 个答案: