当前位置: 首页 > 面试题库 >

单元测试React click外部组件

柯书
2023-03-14
问题内容

使用此答案中的代码来解决在组件外部单击的问题:

componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
}

componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
}

setWrapperRef(node) {
    this.wrapperRef = node;
}

handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
        this.props.actions.something() // Eg. closes modal
    }
}

我不知道如何对不愉快的道路进行单元测试,以使警报不会运行,到目前为止,我得到了什么:

it('Handles click outside of component', () => {
  props = {
    actions: {
      something: jest.fn(),
    }
  }
  const wrapper = mount(
    <Component {... props} />,
  )
  expect(props.actions.something.mock.calls.length).toBe(0)

  // Happy path should trigger mock

  wrapper.instance().handleClick({
    target: 'outside',
  })

  expect(props.actions.something.mock.calls.length).toBe(1)  //true

  // Unhappy path should not trigger mock here ???

  expect(props.actions.something.mock.calls.length).toBe(1)
})

我试过了:

  • 通过发送 wrapper.html()
  • .find节点并发送通过(不模拟event.target
  • .simulate荷兰国际集团click在元件内部(不触发事件侦听器)

我确定我缺少一些小东西,但是我在任何地方都找不到这样的例子。


问题答案:

import { mount } from ‘enzyme’
import React from ‘react’
import ReactDOM from ‘react-dom’

it('Should not call action on click inside the component', () => {
  const map = {}

  document.addEventListener = jest.fn((event, cb) => {
    map[event] = cb
  })

  const props = {
    actions: {
      something: jest.fn(),
    }
  }

  const wrapper = mount(<Component {... props} />)

  map.mousedown({
    target: ReactDOM.findDOMNode(wrapper.instance()),
  })

  expect(props.actions.something).not.toHaveBeenCalled()
})

来自此酶问题的解决方案在github上。



 类似资料:
  • 使用此答案中的代码解决单击组件外部的问题: 我不知道如何对不愉快的路径进行单元测试,以使警报不运行,目前为止我得到了什么: 我尝试过: 通过

  • 时常组件在运行的时候需要配置你的步骤使用步骤并且迟绑定注入上下文从步骤或者是任务执行。这些是机警的测试像单独的组件除非你有一个办法设置上下文就像他们在一个步骤里执行。那是两个组件的目标在spring batch中:StepScopeTestExecutionListener 和 StepScopeTestUtils 这个监听是公开的在类级别中,它的工作是创建一个步骤为每个测试方法执行上下文。例如:

  • 本文向大家介绍AngularJS 单元测试组件(1.5+),包括了AngularJS 单元测试组件(1.5+)的使用技巧和注意事项,需要的朋友参考一下 示例 组件代码: 考试: 跑!

  • 问题内容: 现在,我的Django单元测试位于。我希望有更多类似等等的东西,但是如果我以这种方式组织测试,Django就会倒闭。 有没有办法做我想做的事情,还是必须将所有测试都放在一个文件中? 问题答案: 从Django的1.6版开始,测试发现机制发生了变化。你不再需要从中导入所有内容,但是现在你必须确保所有包含测试的文件都与该模式匹配。 因此,而不是有和,现在你应该有和。 你还可以创建一个名为的

  • 我正在将vue cli与webpack模板一起使用,当我将模板文件拆分到不同的文件中,并运行或时,会出现以下错误: 警告。/src/组件/Hello.pug模块解析失败: /home/jmanuelrosa/Developer/test-vue/src/components/Hello.pug意外令牌(1:0)您可能需要适当的加载器来处理此文件类型。|. hello|h1{{msg}}|h2 Es

  • 问题内容: 如何检测Angular中组件 外部 的点击? 问题答案: import { Component, ElementRef, HostListener, Input } from ‘@angular/core’;