Блог

Я пытаюсь написать несколько тестов, в которых я издеваюсь над кнопкой мыши и проверяю, могу ли я перейти на нужную страницу. Я хотел бы «сбросить» рендеринг, нажав 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 за помощью.

Маршрутизатор браузера не принимает поддержку истории. Как вы уже упоминали, для того, чтобы сделать это таким образом, вы могли бы использовать обычный маршрутизатор React.

Вы пробовали использовать <Redirect to={'/'}> ?