Jest failed because it cannot find text of rendered button

Question

I very new to writing tests. Basically I want to test if the menu opens up when clicking it. The options are buttons with the text "Edit" and "Delete". Test fails with

"Unable to find an element with text: Edit"

MealCard.test.tsx

/**
 * @jest-environment jsdom
 */
import { MenuProvider } from 'react-native-popup-menu';
import { fireEvent, render, screen } from "@testing-library/react-native"
import { MealCard } from "../src/components/MealCard";
import { Provider } from 'react-redux';
import createMockStore from 'redux-mock-store'

const mockStore = createMockStore([])

describe("testing MealCard component", () => {
    const store = mockStore([])
    
    test("open menu with edit and delete options", () => {
        const testItem ={
            image: 'null',
            name: 'testing', 
            id: 'name+date',
            calories: 2000,
            proteins: 150,
            carbohydrates: 200, 
            fats: 90, 
        }
        const rendered = render (
            <Provider store={store}>
                <MenuProvider>
                    <MealCard key="testing" item={testItem}/>
                </MenuProvider>
            </Provider>
        )

        fireEvent.press(rendered.getByTestId("moreMenuTrigger"), "onMenuOpen")
        expect(rendered.getByText("Edit")).toBeVisible();
        // expect(rendered.getByText("Delete")).toBeDefined();

    })
})

MealCard.tsx

import { Menu, MenuOption, MenuOptions, MenuTrigger } from "react-native-popup-menu"
...
<Menu>
    <MenuTrigger testID="moreMenuTrigger">
        <Icon  name='dots-horizontal' size={34} color="#65C18C" />
    </MenuTrigger>
    <MenuOptions>
        <MenuOption onSelect={() => alert(`Save`)} text='Edit' />
        <MenuOption onSelect={() => dispatch(removeItem(props.item))} >
            <Text style={{ color: 'red' }}>Delete</Text>
        </MenuOption>
    </MenuOptions>
</Menu>

Project works as expected if I were to start and use the app. I suspect the issue lies within the react-native-popup-menu but im not sure how to find the problem within the source code.

It means your menu did not open its options. Give more clarity like how your menu works. whether you have to click it or hover over it to show the submenu ? — Arjun, Dec 24 '22 at 11:11
You can use `rendered.debug()` to print out the DOM you're testing. — Abe, Dec 24 '22 at 17:53
so it should open when i click it. I added an `onPress` prop to my so i know that the fireEvent is targeting correctly. now im still confused why my test fails. i saw on other SO posts and it might suggest that the fireEvent is async? but im not familiar with those solutions yet. — benwl, Dec 25 '22 at 00:24
It seems to me that your `MealCard.tsx` is missing something (e.g. I don't see the logic between pressing `MenuTrigger` and `MenuOption` showing up, and the `onPress` prop is not in there). Could you please show the latest version? Furthermore, I am not familiar with 'toBeVisible'. I usually use `expect(rendered.queryByText('Edit')).toBeTruthy()` to check if an element exists and `toBeFalsy()` to check if it doesn't exist. You can give that a shot. — Fanchen Bao, Dec 25 '22 at 02:00
I left out the `onPress` prop because its not actually doing anything. If I were to start the app and use it, it works expectedly. I put the `onPress` prop just to see if my test would console log anything when pressed and it does so i do know the `fireEvent` works. . I suspect the problem does lie within the `` but its an imported package, and im unsure how to find the problem within the source code. — benwl, Dec 26 '22 at 01:13

score 2 · Answer 1 · answered Jan 01 '23 at 21:37

You should start by using rendered.debug() to output host elements rendered by your components. Then you will see what exactly is rendered.

One potential cause is that your action makes the change asynchronously, so you might try using await findByText('Edit') rather than getByText('Edit').

Otherwise, there is too little details to tell exactly why your tests are failing.

Jest failed because it cannot find text of rendered button

1 Answers1