Jest ve Enzyme ile React test yazmak

React ile geliştirdiğimiz uygulamanın component düzgün çalışıp çalışmadığını kontrol etmek için test yazarız.  Enzyme, React Bileşenlerinizin çıktısını test etmeyi kolaylaştıran, React için bir JavaScript Test aracıdır. AirBnb tarafından geliştirilmiştir. Jest, Facebook tarafından geliştirilmiş javascript test kütüphanesidir.

React componentlerimizi test etmek için bu ikisini beraber kullanacağız.  Kurumlar ve daha fazla detay için bu dökümanlara bakabilirsiniz. https://enzymejs.github.io/enzyme/ ve https://jestjs.io/

basit bir shallow rendering  test yazalım

import React from 'react';
import { shallow } from 'enzyme';
import NotFound from 'views/NotFound'

describe('NotFound', () => {

    it('should render correct', () => {
        const component = shallow(<NotFound
        />)
        expect(component).not.toBeNull();
    })
});

shallow  yöntemi test ettiğimiz bileşeni oluşturmak için kullanılır. Alt bileşenleri işlemez.

mount yöntemi testleri yürüttüğümüz üst bileşenin alt bileşenlerini içeren tam DOM’u işler.

Buda başka bir örnek. Props gönderip onlarıda test ediyoruz

import React from 'react';
import { shallow, mount } from 'enzyme';
import { ProductCard } from 'views/EmploymentSelect/components'

describe('ProductCard', () => {
    const product = {
        since: new Date(),
        department: 'Department',
        workplace: 'WorkPlace',
        company: 'Company',
        group: 'Group',
        country: 'Country'
    }

    it('should render correct', () => {
        const component = shallow(<ProductCard
            product={product}
            setEmploymentDetail={key => key}
            t={key => key}
        />)
        expect(component).not.toBeNull();
    })

    it('should control props for ProductCard', () => {
        const component = mount(<ProductCard
            product={product}
            setEmploymentDetail={key => key}
            t={key => key}
        />)
        expect(component).not.toBeNull();
        expect(component.props().product).toEqual(product)
    })
});

sizler ihtiyacınız olan test senaryolarına göre ihtiyacınız yöntemi belgelerden bulup kullanabilirsiniz. Ben burada amacım componentlerin render oluyor mu? propslar gönderilince sıkıntı var mı yok mu gibisinden basit testler yazmaktı. Örnek olsun diye burayada ekledim. Testleri çalıştırdığınızda, konsolda kaç testen % kaçı geçmiş görebiliyorsunuz.

Bir cevap yazın