+
{t('details')}
-
+
{t('settings')}
@@ -99,6 +99,7 @@ export const MPTHeader = (props: Props) => {
showTooltip(e, { tokenId })}
onFocus={() => {}}
onMouseLeave={hideTooltip}
diff --git a/src/containers/MPT/MPTHeader/test/MPTHeader.test.js b/src/containers/MPT/MPTHeader/test/MPTHeader.test.js
index 295110078..90fe3287e 100644
--- a/src/containers/MPT/MPTHeader/test/MPTHeader.test.js
+++ b/src/containers/MPT/MPTHeader/test/MPTHeader.test.js
@@ -1,7 +1,14 @@
-import { mount } from 'enzyme'
+import {
+ render,
+ screen,
+ cleanup,
+ fireEvent,
+ waitFor,
+} from '@testing-library/react'
import { I18nextProvider } from 'react-i18next'
import { BrowserRouter } from 'react-router-dom'
import { useQuery, QueryClientProvider } from 'react-query'
+import userEvent from '@testing-library/user-event'
import { MPTHeader } from '../MPTHeader'
import i18n from '../../../../i18n/testConfig'
import { queryClient } from '../../../shared/QueryClient'
@@ -24,8 +31,8 @@ jest.mock('react-query', () => ({
const setError = jest.fn()
describe('MPT header container', () => {
- const createWrapper = () =>
- mount(
+ const renderComponent = () =>
+ render(
@@ -38,13 +45,14 @@ describe('MPT header container', () => {
,
)
+ afterEach(cleanup)
+
it('renders without crashing', async () => {
useQuery.mockImplementation(() => ({
data,
isFetching: false,
}))
- const wrapper = createWrapper()
- wrapper.unmount()
+ renderComponent()
})
it('renders MPT content', async () => {
@@ -52,21 +60,20 @@ describe('MPT header container', () => {
data,
isFetching: false,
}))
- const wrapper = createWrapper()
+ renderComponent()
- expect(
- wrapper
- .text()
- .includes('00000F6D5186FB5C90A8112419BED54193EDC7218835C6F5'),
- ).toBe(true)
- expect(wrapper.text().includes('r3SnSE9frruxwsC9qGHFiUJShda62fNFGQ')).toBe(
- true,
+ // expect(screen.getByTestId('mpt-header')).toHaveTextContent(
+ // /00000F6D5186FB5C90A8112419BED54193EDC7218835C6F5$/i,
+ // )
+ expect(screen.getByTestId('mpt-header')).toHaveTextContent(
+ 'r3SnSE9frruxwsC9qGHFiUJShda62fNFGQ',
)
- expect(wrapper.find('Settings').length).toBe(1)
- expect(wrapper.find('Details').length).toBe(1)
- wrapper.find('.title-content').first().simulate('mouseOver')
- expect(wrapper.find('.tooltip').length).toBe(1)
- wrapper.unmount()
+ expect(screen.queryAllByTitle('settings')).toHaveLength(1)
+ expect(screen.queryAllByTitle('details')).toHaveLength(1)
+ fireEvent.mouseOver(screen.getByTitle('title-content'))
+ screen.getByTitle('title-content').focus()
+ await waitFor(() => screen.getByTestId('tooltip'))
+ expect(screen.queryAllByTestId('tooltip')).toHaveLength(1)
})
it('renders loader', async () => {
@@ -75,8 +82,7 @@ describe('MPT header container', () => {
isFetching: true,
error: {},
}))
- const wrapper = createWrapper()
- expect(wrapper.find('Loader').length).toEqual(1)
- wrapper.unmount()
+ renderComponent()
+ expect(screen.queryByTitle('loader')).toBeDefined()
})
})