React Router v4 Yönlendirme birimi testi

Question

Bileşeni reaktif yönlendirici v4'te nasıl test edebilirim? Başarı ile jest ve enzim kullanarak bir yönlendirme ile basit bir bileşen birim test çalışıyorum.

Benim bileşen:

const AppContainer = ({ location }) => 
    (isUserAuthenticated() 
    ? <AppWithData /> 
    : <Redirect 
     to={{ 
      pathname: "/login", 
      state: { from: location } 
     }} 
     />); 

test etmek girişimim:

function setup() { 
    const enzymeWrapper = mount(
    <MemoryRouter initialEntries={["/"]}> 
     <AppContainer /> 
    </MemoryRouter> 
); 

    return { 
    enzymeWrapper 
    }; 
} 

jest.mock("lib/authAPI",() => ({ 
    isUserAuthenticated: jest.fn(() => false) 
})); 

describe("AppContainer component",() => { 
    it("renders redirect",() => { 
    const { enzymeWrapper } = setup(); 

    expect(enzymeWrapper.find("<Redirect></Redirect>")).toBe(true); 
    }); 
}); 

Answer 1

Kendi sorumu cevaplama. Temelde ben sığ benim bileşenin hale yapma ve doğrulama ediyorum aksi yönlendirme bileşeni App birini render edilir doğrulanmış eğer. İşte kodu:

RedirectApp.js:

import React from "react"; 
import { Route, Switch, Redirect } from "react-router-dom"; 

const RedirectApp = props => { 
    return (
    <Switch> 
     <Redirect from="/all-courses" to="/courses" /> 
    </Switch> 
); 
}; 

export default RedirectApp; 

RedirectApp.test.js

function setup() { 
    const enzymeWrapper = shallow(<AuthenticatedApp />); 

    return { 
    enzymeWrapper 
    }; 
} 

describe("AuthenticatedApp component",() => { 
    it("renders Redirect when user NOT autheticated",() => { 
    authApi.isUserAuthenticated = jest.fn(() => false); 
    const { enzymeWrapper } = setup(); 

    expect(enzymeWrapper.find(Redirect)).toHaveLength(1); 
    }); 

    it("renders AppWithData when user autheticated",() => { 
    authApi.isUserAuthenticated = jest.fn(() => true); 
    const { enzymeWrapper } = setup(); 

    expect(enzymeWrapper.find(AppWithData)).toHaveLength(1); 
    }); 
}); 

Answer 2

İşte Gerçek URL yerine Redirect bileşen sayfasında bulunan sadece bunun değiştiğini test benim minimum örnek:

import React from "react"; 
import { MemoryRouter, Route } from "react-router-dom"; 
import { mount } from "enzyme"; 
import RedirectApp from "./RedirectApp"; 

it("redirects /all-courses to /courses",() => { 
    const wrapper = mount(
    <MemoryRouter initialEntries={[`/all-courses`]}> 
     <Route component={RedirectApp} /> 
    </MemoryRouter> 
); 

    expect(wrapper.find(RedirectApp).props().location.pathname).toBe("/courses"); 
}); 

bir Route içinde RedirectApp sararak, MemoryRouterRedirectApp içinde react-router sahne (match, location ve history) enjekte eder.

enzyme bu props() kapmak sağlar ve location prop yönlendirme sonra pathname içerir, bu nedenle yeniden yönlendirilen konum eşleştirilebilir.

Bu yöntem biraz hacky ama bir yönlendirme doğru yere gidiyor ve bir Redirect var sadece yani test avantajına sahiptir.

Alternatif olarak,numaralı export default withRouter(RedirectApp) numaralı bağlantı noktasını otomatik olarak react-router probu enjekte ederek alabilirsiniz.