Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6290

Jest failed because it cannot find text of rendered button

$
0
0

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>

Viewing all articles
Browse latest Browse all 6290

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>