मैं यह जांचने की कोशिश कर रहा हूं कि मेरा राउटर उम्मीद के मुताबिक काम कर रहा है। लेकिन मैं राउटर को / के अलावा किसी अन्य स्थान पर इंगित नहीं कर सकता

यहाँ मेरा सरलीकृत परीक्षण कोड है।

App.tsx

import React from 'react';
import {Route, Switch, BrowserRouter} from 'react-router-dom';

const App: React.FC = () => {
    return (
        <div>
            <BrowserRouter>
                <Switch>
                    <Route path={'/test'}>test</Route>
                    <Route path={'/'}>index</Route>
                </Switch>
            </BrowserRouter>
        </div>
    );
};

export default App;

App.test.tsx

import React from 'react';
import App from './App';
import {MemoryRouter} from 'react-router-dom';
import {render} from '@testing-library/react';


test('renders /test route', async () => {
    const app = render(
        <MemoryRouter initialEntries={['/test']} initialIndex={0}>
            <App/>
        </MemoryRouter>);
    expect(app.getByText(/test/i)).toBeInTheDocument();
});

मुझे निम्न त्रुटि संदेश मिलता है:

Error: Unable to find an element with the text: /test/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

<body>
  <div>
    <div>
       index
    </div>
  </div>
</body>

मैं क्या गलत कर रहा हूं?

12
emcell 24 जिंदा 2020, 10:45

1 उत्तर

सबसे बढ़िया उत्तर

समस्या यह है कि जिस घटक का मैं परीक्षण करना चाहता था, उसके पास पहले से ही एक राउटर घोषित है। इस समस्या को हल करने के लिए मुझे App घटक को App और Routes में विभाजित करना पड़ा।

परीक्षण के लिए मुझे बस Routes घटक प्रस्तुत करना है और सब कुछ अपेक्षित रूप से काम करता है।

App.tsx

import React from 'react';
import {Route, Switch, BrowserRouter} from 'react-router-dom';

export const Routes = () => {
    return (
        <>
            <Switch>
                <Route path={'/test'}> test</Route>
                <Route path={'/'}> index</Route>
            </Switch>
        </>
    )
};

const App: React.FC = () => {
    return (
        <div>
            <BrowserRouter>
                <Routes/>
            </BrowserRouter>
        </div>
    );
};

export default App;

App.test.tsx

import React from 'react';
import {Routes} from './App';
import {MemoryRouter} from 'react-router-dom';
import {render} from '@testing-library/react';


test('renders routes correct', async () => {
    const app = render(
        <MemoryRouter initialEntries={['/test']} initialIndex={0}>
            <Routes/>
        </MemoryRouter>
    );
    expect(app.getByText(/test/i)).toBeInTheDocument();
});

7
emcell 24 जिंदा 2020, 14:18