1

component is like: <Button and <Icon are customized components which wrap up the <button and <icon


const handleToggleShow = useCallback(() => {
    setShow(!show);
}, [show]);

const displayUI = (
    <div>
        <Icon
            testId="editIcon"
            onClick={handleToggleShow}
            className="edit-icon"
        >
    </div>
);

const editUI = (
 <form data-testid="form" onSubmit={handleSubmit}
    <InputComponent /> 
    <Button 
        testId="saveButton"
        text="Save"
        disabled={...}
        size="large"
        color="blue"
        type="submit"
    />
    <Button
        testId="cancelButton"
        text="Cancel"
        disabled={...}
        size="large"
        color="grey"
        onClick={handleClickCancel}
    />
 </form>
);


return(
<div>
    {show ? editUI}
    {!show? displayUI}
</div>
);

Test is like:

test("show render edit ui when click button", () => {
    render(<A {...props} />)
    const icon = screen.getByTestId("editIcon");
    expect(icon).toBeInDocument();

    fireEvent.click(element);
    const form = screen.getByTestId("form"); 
   //here throws error: unable to find an element by [data-testid="form"]
    expect(form).toBeInDocument();
});

Then I tried queryByTestId("form") and tried getByTestId("saveButton"), it throws error "received value must be an HTMLElement or as an SVGElement",

I was thinking maybe icon click event was not triggered, then I ran this test, still got error

test("show render edit ui when click button", () => {
    const handleToggleShow = jest.fn();
    render(<A {...props} />)
    const icon = screen.getByTestId("editIcon");
    expect(icon).toBeInDocument();

    fireEvent.click(element);
    expect(handleToggleShow).toHaveBeenCalled(); //received number of calls 0
});

Anyone can help? why getByTestId or queryByTestId is not working

Rufus7
  • 95
  • 2
  • 10
  • You might have to wait for the UI to respond to your `fireEvent`. Testing LIbrary has a helper `waitFor` function that's `async`. So, after your click, you can try `await waitFor(() => { expect(screen.getByTestId("form")).toBeInDocument()) }`. Basically, this will wait until your callback no longer throws an error. – heyitsjhu Jan 17 '23 at 04:14
  • Can't reproduce your issue. Please provide a https://stackoverflow.com/help/minimal-reproducible-example – Lin Du Jan 17 '23 at 04:50
  • Can you please share the code for your `Icon` and `Button` components? – Avi Jan 17 '23 at 10:33
  • @heyitsjhu Thank you! I tried, still received error "unable to find an element by [data-testid="form"]". UI is working fine, don't know why test failed – Rufus7 Jan 17 '23 at 18:19

1 Answers1

0

Update here: In the previous test, I didn't pass any mock props to the component. after passing props, the issue somehow fixed.

Rufus7
  • 95
  • 2
  • 10
  • This is more of a comment than an answer. you should either create a more detailed answer with explanation or move it as a comment instead. – zoran404 Jan 22 '23 at 11:09