I very new to writing tests. Basically I want to test if the menu opens up with 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
<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>