test bileşeni, alay ve Enzim

Question

I reaksiyona-yönlendirici kullanan basit bir bileşeni (farkında this alfa yapı olduğu) Test ederken bileşenlere bağlam sağlar. Benim bileşeni hale getirdiği test edebilmek istiyorum - Ben HomeLogin bağlı bir bileşendir, çünkü sorunlara neden olan Enzim en mount() veya render(), kullanmak zorunda -

Ancak Jest/Enzim ile ben işlemek shallow() açamıyorum Doğru şey, ama değil, onun içinde oluşturulan bileşeni test edin.

Benim testi:

it('Renders based upon matched route',() => { 
    let props = { 
    app: { health: true }, 
    }; 
    const component = render(
    <Provider store={store}> 
     <MemoryRouter location="/"> 
     <Jumbotron {...props} /> 
     </MemoryRouter> 
    </Provider> 
); 
    expect(toJson(component)).toMatchSnapshot(); 
}); 

nasıl redux mağaza sağlamak zorunda veya sığ hale kullanmadan rota dayalı bu bileşenin çıkışını test edebilirsiniz?

Güncelleştirme:shallow()'u kullanmaya çalışırsam, anlık görüntü çıktı vermiyor.

Answer 1

Sen .find(Jumbotron) kullanmak ve örneğin anlık olarak eşleştirmek için kullanabiliriz:

const wrapped = component.find(Jumbotron); 
expect(toJson(wrapped)).toMatchSnapshot(); 

Ben withRouter() içeren daha karmaşık bir örnek vardı ve anlık olarak eşleşen önce çıkışından tüm anahtarları kaldırarak için restore edilmiştir. Eh, React-Router v4 testi Jest ve anlık görüntü testi ile daha katı hale gelinceye kadar. Örnek:

export function removeKeys(object) { 
    if (object === undefined || object === null) { 
     return object; 
    } 
    Object.keys(object).forEach((key) => { 
     if (typeof object[key] === 'object') { 
      removeKeys(object[key]); 
     } else if (key === 'key') { 
      delete object[key]; 
     } 
    }); 
    return object; 
} 

... 

expect(removeKeys(toJson(component))).toMatchSnapshot();