How do I trigger custom events, props.onXX()

[qunbotop]

The current situation is that instead of using emit, I am using props.OnCrossOpen?.() to trigger. I want to know how to write test cases.

The following code:

 export default defineComponent({
  name: 'ChildEmit',
  // emits: ['crossOpen'],
  props:{
    onCrossOpen: Function,
    time: Number
  },
  setup(props, { emit }) {
    let timer = ref(null);
    const setTimer = () => {
      timer.value = setTimeout(() => {
        clearTimeout(timer.value)
        props.onCrossOpen?.(1);
        // emit('crossOpen', 1);
      }, 2000)   
    } 

    onMounted(() => {
      props.time && setTimer();
    })

    return () => (
      <div>
        <button>open</button>
      </div>
    )
  }
})

I know it is written in the emit way

it('emit', (done) => {
  const wrapper = mount({
    render() {
      return <ChildEmit time={2000}></ChildEmit>
    }
  });
  const timer = setTimeout(() => {
    const dom = wrapper.findComponent(ChildEmit);
    expect(dom.emitted()['crossOpen']).toBeTruthy();
    done();
    clearTimeout(timer);
  }, 3000);
});

What should I do if I use props.onCrossOpen() ? I need your help, Thank you very much!

[cexbrayat]

I usually write a test component that uses ChildEmit and passes a spy function as onCrossOpen (jest.fn() if you use Jest). Then the test mounts the test component, triggers the action, and checks that the spy has been called with the proper value with toHaveBeenCalledWith().

Note that you don't have to write a test that waits for 3 seconds: you can use fake timers to "advance the time" by 3 seconds, and have a test that runs instantly. Check https://jestjs.io/docs/timer-mocks if you sue Jest.

[qunbotop]

I have tried it according to your suggestion, and it seems to have solved my problem. I have posted the code here, and I hope to get advice if there is any improvement. I felt very happy when I saw the green pass displayed on the terminal. Thank you very much for your help and guidance.

jest.useFakeTimers();
describe('ChildEmit', () => {
  it('emit', () => {
    const wrapper = mount(ChildEmit, {
      props: {
        onCrossOpen: jest.fn(),
        time: 3000
      }
    });

    const dom = wrapper.findComponent(ChildEmit);
    expect(dom.props()['onCrossOpen']).not.toBeCalled();
    expect(dom.props()['onCrossOpen']).toHaveBeenCalledTimes(0);
    
    jest.runAllTimers()

    expect(dom.props()['onCrossOpen']).toBeCalled();
    expect(dom.props()['onCrossOpen']).toHaveBeenCalledTimes(1)
  });
})

[freakzlike]

You can reduce the code a bit:

jest.useFakeTimers();
describe('ChildEmit', () => {
  it('emit', () => {
    const onCrossOpen = jest.fn();
    mount(ChildEmit, {
      props: {
        onCrossOpen,
        time: 3000
      }
    });

    expect(onCrossOpen).not.toBeCalled();

    jest.runAllTimers();

    expect(onCrossOpen).toHaveBeenCalledTimes(1);
  });
})

[cexbrayat]

Yes, that's exactly what I was going to comment 👍

[qunbotop]

You can reduce the code a bit:

jest.useFakeTimers();
describe('ChildEmit', () => {
  it('emit', () => {
    const onCrossOpen = jest.fn();
    mount(ChildEmit, {
      props: {
        onCrossOpen,
        time: 3000
      }
    });

    expect(onCrossOpen).not.toBeCalled();

    jest.runAllTimers();

    expect(onCrossOpen).toHaveBeenCalledTimes(1);
  });
})

wonderful ! Thanks !