-
Notifications
You must be signed in to change notification settings - Fork 468
Description
@testing-library/dom
version: 7.23.0@testing-library/jest-dom
version 5.11.4@testing-library/user-event
version 12.1.3- DOM Environment:
jsdom
version 11.12.0
node
version 12.18.3
Relevant code or config
/** * @jest-environment jsdom-sixteen */
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
import { customTheme } from '../../CustomTheme';
import store from '../../store';
import App from '../../App';
import { server } from '../../mock-api/mockServer';
import { flushChanges } from '../utils';
beforeAll(() => server.listen({ onUnhandledRequest: 'warn' }));
afterAll(() => server.close());
afterEach(() => server.resetHandlers());
describe('Team Initialisation', () => {
test('Shows the Contract Team Initialisation Screen', async () => {
window.history.pushState({}, 'Test Page', '/');
render(
<Provider store={store}>
<MuiThemeProvider theme={customTheme}>
<BrowserRouter>
<App />
</BrowserRouter>
</MuiThemeProvider>
</Provider>
);
const contractButtons = await waitFor(() => screen.getAllByRole('button', { name: 'Contract Management' }));
await flushChanges();
const thirdButton = contractButtons[2];
userEvent.click(thirdButton);
await waitFor(() => expect(screen.queryByRole('link', { name: 'Marker' })).toBeInTheDocument());
const markerLink = screen.queryByRole('link', { name: 'Marker' });
userEvent.click(markerLink);
const teamInitialisation = await waitFor(() => screen.getAllByRole('heading', { name: 'Step 1: Team Initialisation' }));
userEvent.click(teamInitialisation);
await waitFor(() => expect(screen.queryByRole('heading', { name: 'Contract Teams Initialisation (MAR, CMK) 2020' })).toBeInTheDocument());
});
});
I wait for a heading to appear with the text "Step 1: Team Initialisation". I then use userEvent to click on this. I was expecting a new view to then appear, and I wanted to check and confirm I get the correct heading in the new View.
However the test fails, with this message:
Unable to find the "window" object for the given node.
There is quite a lot of code behind this, and it will be difficult to create a repo that reproduces it. If any debugging output is needed, please let me know, and I will run it and provide it. I have however logged out the teamInitialisation node below.
[
HTMLHeadingElement {
'__reactInternalInstance$yvumxg78ytr': FiberNode {
tag: 5,
key: null,
elementType: 'h6',
type: 'h6',
stateNode: [Circular],
return: [FiberNode],
child: null,
sibling: [FiberNode],
index: 2,
ref: null,
pendingProps: [Object],
memoizedProps: [Object],
updateQueue: null,
memoizedState: null,
dependencies: null,
mode: 0,
effectTag: 0,
nextEffect: null,
firstEffect: null,
lastEffect: null,
expirationTime: 0,
childExpirationTime: 0,
alternate: null,
actualDuration: 0,
actualStartTime: -1,
selfBaseDuration: 0,
treeBaseDuration: 0,
_debugID: 6344,
_debugIsCurrentlyTiming: false,
_debugSource: [Object],
_debugOwner: [FiberNode],
_debugNeedsRemount: false,
_debugHookTypes: null
},
'__reactEventHandlers$yvumxg78ytr': { children: 'Step 1: Team Initialisation' },
[Symbol(SameObject caches)]: [Object: null prototype] { childNodes: NodeList {} }
}
]
Problem description:
So I am able to locate and get the node, but somehow am unable to do the click on it, as on doing the userEvent.click, it errors saying that it is unable to find the window object for the given node.
I also get a warning about can't perform a React state update on an unmounted component, asking me to cancel all subscriptions in the componentWillUnmount Method, however the ContractManagementPage doesn't actually have a componentWillUnmount method declared.