93 lines
2.7 KiB
JavaScript
93 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import { render } from '@testing-library/react';
|
|
import '@testing-library/jest-dom';
|
|
import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
|
|
import { MemoryRouter, Route, Routes } from 'react-router-dom';
|
|
import theme from '../theme';
|
|
import I18n from '../I18n';
|
|
|
|
/*
|
|
This is wrapper for the render method in order to provide all required providers and
|
|
not to repeat them for each test.
|
|
|
|
If you want to debug a test by having a look at the current output of the component,
|
|
simply import the "screen" object from this file and use the "debug()" method:
|
|
|
|
test('displays the header and paragraph text', () => {
|
|
render(<Travel />)
|
|
screen.debug()
|
|
})
|
|
|
|
or of a specific element in the component:
|
|
|
|
test('displays the header and paragraph text', () => {
|
|
render(<Travel />)
|
|
const header = screen.getByRole('heading', { name: /travel anywhere/i })
|
|
screen.debug(header)
|
|
})
|
|
|
|
More about "render" and "screen" on https://testing-library.com/docs
|
|
|
|
For testing certain conditions, check out https://jestjs.io/docs/expect and for
|
|
running tests, check out https://jestjs.io/docs/api.
|
|
|
|
As an alternative to fireEvent there is the userEvent which may simulate better
|
|
a user clicking around. Example:
|
|
|
|
import { render, screen } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
|
|
test("radio", () => {
|
|
const user = userEvent.setup();
|
|
render(
|
|
<form>
|
|
<label>
|
|
First <input type="radio" name="radio1" value="first" />
|
|
</label>
|
|
<label>
|
|
Second <input type="radio" name="radio1" value="second" />
|
|
</label>
|
|
</form>
|
|
)
|
|
|
|
await user.click(screen.getByLabelText("Second"));
|
|
});
|
|
*/
|
|
|
|
const NoRoute = (props) => {
|
|
return null;
|
|
};
|
|
|
|
const AllTheProviders =
|
|
(initialEntries, path) =>
|
|
({ children }) => {
|
|
if (typeof initialEntries === 'undefined') {
|
|
initialEntries = '/';
|
|
}
|
|
if (typeof path === 'undefined') {
|
|
path = '/';
|
|
}
|
|
return (
|
|
<StyledEngineProvider injectFirst>
|
|
<ThemeProvider theme={theme}>
|
|
<I18n>
|
|
<MemoryRouter initialEntries={[initialEntries]}>
|
|
<Routes>
|
|
<Route path={path} element={children} />
|
|
<Route path="*" element={<NoRoute />} />
|
|
</Routes>
|
|
</MemoryRouter>
|
|
</I18n>
|
|
</ThemeProvider>
|
|
</StyledEngineProvider>
|
|
);
|
|
};
|
|
|
|
const customRender = (ui, options, initialEntries, path) => render(ui, { wrapper: AllTheProviders(initialEntries, path), ...options });
|
|
|
|
// re-export everything
|
|
export * from '@testing-library/react';
|
|
|
|
// override render method
|
|
export { customRender as render };
|