#reactjs #jestjs #react-router
Вопрос:
Я пытаюсь написать несколько тестов, в которых я издеваюсь над кнопкой мыши и проверяю, могу ли я перейти на нужную страницу. Я хотел бы «сбросить» рендеринг, нажав URL-адрес таким образом history.push('/');
, чтобы перенаправлять на главную страницу после каждого теста. Я думал о том, чтобы иметь что-то вроде
afterEach(() => {
history.push('/');
})
Я разделил свой код на два файла, чтобы сделать его более читабельным.
App.test.js
import '@testing-library/jest-dom';
import {render, screen} from '@testing-library/react';
import App from "../App";
import {clickButton, waitForPage} from "./Functions";
beforeEach(() => {
render(<App/>);
})
afterEach(() => {
history.push('/');
})
test('Cookies banner is visible', () => {
const bannerText = screen.getByText(/This website uses cookies/i);
expect(bannerText).toBeInTheDocument();
})
test('Routing web page test', async () => {
const road = [
['site design', 'How this works'],
['my story', 'Born curious'],
['contact', 'Please leave a message'],
['games', 'metal'],
['trivial', 'Set up your game'],
['web cams', 'Web Cam Of The Day'],
['radio', 'media player'],
['movies', 'movie platform'],
['weather','is going in my'],
['recipes', 'cooking']
]
await waitForPage('manciotech');
clickButton('enter');
await waitForPage('site design');
for (const comb of road) {
clickButton(comb[0]);
await waitForPage(comb[1]);
clickButton('go back');
}
},10000)
test('Not connected pages', async () => {
await waitForPage('site design');
clickButton('my projects');
await waitForPage('go back');
expect(window.location.pathname).toBe('/boo');
})
Functions.js
import {screen, waitFor} from "@testing-library/react";
export const waitForPage = async function (name) {
await waitFor(() => {
expect(screen.getByText(new RegExp(name, "i"))).toBeInTheDocument();
})
}
export const clickCookiesConsent = function (){
screen.getByRole('button', {name: /accept/i}).click();
}
export const clickButton = function (name){
const enter = screen.getByRole('button', {name: new RegExp(name, 'i')});
enter.click();
}
Я следил за многими учебниками, но ничего не работает. Я попробовал с <Router>
помощью и крючка истории, используя windows.location ecc…
Похоже, у меня проблемы, потому что я использую BrowserRouter вместо маршрутизатора. Я написал код своего приложения с помощью браузера из-за ограничений, с которыми я столкнулся, создавая приложение по-другому, но это заканчивается вслепую…. если я больше не могу тестировать….
вот мой полный код https://github.com/mancio/MancioTechWeb
Tnx за помощью.
Ответ №1:
Маршрутизатор браузера не принимает поддержку истории. Как вы уже упоминали, для того, чтобы сделать это таким образом, вы могли бы использовать обычный маршрутизатор React.
Вы пробовали использовать <Redirect to={'/'}>
?