Reactjs 在<；a>；标签

我有一个本地函数，它应该在单击按钮时调用，并在其中设置布尔变量的状态。我尝试将单元测试添加到此模块，以确定按钮是否被单击，以及在按钮单击后是否调用函数

但是我的考试不及格。我尝试在“descripe”方法中模拟函数，但它不起作用

SomeComponent.js

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        openImagesDialog: false,
    }
  }

  fuctionToBeCalled = (val) => {
      this.setState({ openImagesDialog: val })
  }

  render() {
    return (
      <a onClick={() => this.fuctionToBeCalled(true)} className="img-container float">
        {child components....}
      </a>
    )
  }
}

类SomeComponent扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
OpenImages对话框：false，
}
}
功能待调用=（val）=>{
this.setState（{openImagesDialog:val}）
}
render（）{
返回(
this.fuctionToBeCalled（true）}className=“img container float”>
{子组件…}
)
}
}

SomeComponent.test.js

import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import SomeComponent from '../SomeComponent';
import SomeAnotherComp from "../SomeAnotherComp";

Enzyme.configure({ adapter: new Adapter() })

function setup() {
  const props = {
    openImagesDialog: false
  }
  let enzymeWrapper = shallow(<SomeComponent {...props} />)
  return {
    props,
    enzymeWrapper
  }
}

describe('components', () => {
  const { props, enzymeWrapper } = setup()

  it('should call fuctionToBeCalled(){}', () => {
    const SomeAnotherCompProps = enzymeWrapper.find(SomeAnotherComp).props()
    const fuctionToBeCalled = jest.fn(()=>true);


    enzymeWrapper.find('a').simulate('click')
    expect(fuctionToBeCalled).toBeCalled();
    //expect(SomeAnotherCompProps.dialogOpen).toBe(true)
  })
})

从“React”导入React；
从“酶”中导入酶，{shall，mount}；
从'enzyme-Adapter-react-16'导入适配器；
从“../SomeComponent”导入SomeComponent；
从“./SomeAnotherComp”导入其他公司；
configure（{adapter:new adapter（）}）
函数设置（）{
常量道具={
openImagesDialog:错误
}
让enzymeWrapper=浅（）
返回{
道具，
酶包装
}
}
描述（'组件'，（）=>{
const{props，enzymeWrapper}=setup（）
它（'应该调用fuctionToBeCalled（）{}'，（）=>{
const SomeAnotherCompProps=enzymeWrapper.find（SomeAnotherComp.props（））
const fuctionToBeCalled=jest.fn（（）=>true）；
enzymeWrapper.find（'a'）.simulate（'click'））
expect（functiontobecalled）.toBeCalled（）；
//期望（SomeAnotherCompProps.dialogOpen）.toBe（true）
})
})

---

我想知道有没有其他方法可以尝试一下。

首先，

openImagesDialog

不是一个道具，而是组件中的一种状态。

---

其次，

fuctionToBeCalled

是一个在组件实例上定义的函数，您需要在其上定义

spy

，而不仅仅是创建一个模拟函数。为此，在组件实例上使用

spyOn

。您还可以在模拟单击后检查状态

import React from 'react'
import Enzyme, { shallow, mount } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import SomeComponent from '../SomeComponent'
import SomeAnotherComp from "../SomeAnotherComp";

Enzyme.configure({ adapter: new Adapter() })

function setup() {
  const props = {
    openImagesDialog: false
  }
  let enzymeWrapper = shallow(<SomeComponent {...props} />)
  return {
    props,
    enzymeWrapper,

  }
}

describe('components', () => {
  const { props, enzymeWrapper } = setup()

  it('should call fuctionToBeCalled(){}', () => {
    const SomeAnotherCompProps = enzymeWrapper.find(SomeAnotherComp).props()

    const instance = enzymeWrapper.instance();
    jest.spyOn(instance, 'fuctionToBeCalled');
    enzymeWrapper.find('a').simulate('click')
    expect(instance.fuctionToBeCalled).toBeCalled();
    expect(enzymeWrapper.state('openImagesDialog')).toEqual(true);
  })
})

从“React”导入React
从“酶”导入酶，{shall，mount}
从'enzyme-Adapter-react-16'导入适配器
从“../SomeComponent”导入SomeComponent
从“./SomeAnotherComp”导入其他公司；
configure（{adapter:new adapter（）}）
函数设置（）{
常量道具={
openImagesDialog:错误
}
让enzymeWrapper=浅（）
返回{
道具，
酶包装器，
}
}
描述（'组件'，（）=>{
const{props，enzymeWrapper}=setup（）
它（'应该调用fuctionToBeCalled（）{}'，（）=>{
const SomeAnotherCompProps=enzymeWrapper.find（SomeAnotherComp.props（））
const instance=enzymeWrapper.instance（）；
jest.spyOn（例如，“fuctionToBeCalled”）；
enzymeWrapper.find（'a'）.simulate（'click'））
expect（instance.fuctionToBeCalled.toBeCalled（）；
expect（enzymeWrapper.state（'openImagesDialog'））.toEqual（true）；
})
})

fuctionToBeCalled

只是在测试中模拟的。它与正在测试的部件无关。您需要获取

SomeComponent

组件实例，并在该实例上选中

functionToBeCalled

。但是你最好检查组件的状态。这个解决方案解决了我的问题。我需要检查按钮点击后状态是否改变。这就是为什么我把它作为道具。但似乎应该有另一种方式来触发状态更改：/@HasiniSilva我添加了检查状态更新的代码，我怎么会错过这些。我找不到这些开玩笑的官方医生。谢谢你的解决方案。干杯很高兴能帮忙：-）