reactjs - 在 React 中测试嵌套组件

标签 reactjs unit-testing integration-testing jestjs enzyme

我在测试嵌套组件的事件时遇到了一些问题。 这是我的组件树的样子:

- ModalComponent (Stateful with value for Input and update handler)
- - ModalType (stateless, passes value and update down to input)
- - - Input (stateless)

我在 ModalComponent 中有值状态和更新值的处理程序。此信息通过 Prop 通过 ModalType 传递到我的 Input 元素。

我尝试用 enzyme 安装我的 ModalComponent,找到我的输入并模拟元素的变化。但这没有用。

当处理程序和状态是上面的 n 个父组件时,测试嵌套组件的最佳策略是什么?

编辑 我在一个单独的空白 React 项目中创建了我的组件的精简演示设置

class App extends Component {

  state = {
    inputs: {
      machineName: 'Empty'
    }
  }

  onChangeHandler = (e) => {
    let updatedState = null
    console.log(e.target.value, e.target.id);

    switch (e.target.id) {
      case 'machineName':
        updatedState = { ...this.state.inputs, machineName: e.target.value }
        this.setState({inputs: updatedState})
        break;
      default:
        break;
    }
  }

  render() {
    return (
      <div className="App">
        <ModalType onChange={this.onChangeHandler} value={this.state.inputs}></ModalType>
      </div>
    );
  }
}

const ModalType = (props) => {
  return <Input onChange={props.onChange} value={props.value.machineName}></Input>
}

const Input = (props) => (
  <input id="machineName" onChange={props.onChange} value={props.value}></input>
)

我的测试脚本

test('should handle change on input', () =>{
  const wrapper = mount(<App/>)
  wrapper.setState({inputs: { machineName: 'Empty' }})
  wrapper.find('input').simulate('focus')
  wrapper.find('input').simulate('change', {target: {value: '123'}})
  wrapper.update()
  // fails
  expect(wrapper.state().inputs.machineName).toEqual('123')
  // fails too
  expect(wrapper.find('input').props().value).toEqual('123')
  })

谢谢!

最佳答案

const wrapper = mount(<ModalComponent />);
const input = wrapper.find('input');
const event  = {target: {value: 'testValue'}};
input.simulate('change', event);

上面的代码是一个工作示例,说明如何模拟输入的更改事件。

编辑

您的事件不正确。由于您的处理程序仅在目标 ID 为 machineName 时才会执行某些操作,因此您需要将该 ID 添加到您的模拟事件中。

wrapper.find('input').simulate('change', {target: {value: '123', id: 'machineName'}})

关于reactjs - 在 React 中测试嵌套组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54221783/

相关文章:

wcf - "Fast"WCF服务的集成测试

javascript - 导航时在菜单项上加下划线

reactjs - React Window 如何传入组件?

reactjs - 当容器中的输入值更改时,不会记录 ComponentDidUpdate Inside HOC

Flutter - Mockito - 在测试中使用 async 会产生错误,但使用 async* 可以正常工作吗?

ios - 单元测试电子邮件 注册 Firebase

ember.js - 伪装者和查询参数

javascript - 未从异步等待函数获取返回值

Java 变异测试与 Maven 的集成

Android Studio 集成测试无法解析符号 AndroidJUnit4