Ложная функция не определяется как вызываемая после нажатия кнопки внутри тега <a>

Question

У меня есть локальная функция, которая должна вызываться по нажатию кнопки и устанавливать состояние булевой переменной внутри нее.Я попытался добавить модульный тест в этот модуль, чтобы определить, нажата ли кнопка и вызывается ли функция после нажатия кнопки.

Но мой тест не пройден.Я попытался смоделировать функцию внутри метода «описать», но она не работала.

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.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)
  })
})

Я хотел бы знать, есть ли другой способ попробовать это.

Answer 1

Во-первых, 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);
  })
})