Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

September 3, 2019 10:52 am GMT

A quick guide to Testing React hooks that use RxJS

RxJs is cool when you work with complex async operations. RxJS is designed for reactive programming using Observables. It converts your async operations to Observables. With observables we can "watch" the data stream, passively listening for an event.

React hooks supercharge your functional components in many ways. With hooks, we can abstract and decouple the logics with custom hooks. With the separation of logics makes your code testable and share between components.

This post helps explain how thou can test useEffect hook that uses RxJs inside to listen to mouse click and delay the click with RxJs's debounceTime operator.

Hooks that we are using here.

useState: Enhance functional component with the state.
useEffect: We can perform DOM manipulation and select.

RxJs Operators we are using here.

map: returns Observable value from the provided function using emitted by the source.
debouonceTime: Emits a value from the source Observable only after a particular time has passed without another source emission.

Before we jump to write our test code, let see our example component.

Button.tsx

//Button.tsximport React, { SFC} from 'react'import {useClick} from './useClick'type Props = {    interval?: number;    label?:string;}const Button:SFC<Props> = (props:Props) => {    const {ref, count} = useClick(props.interval)    return <button data-testid="btn" ref={ref}>Hello {count}</button>}export default Button

useClick.ts

// useClick.tsimport React, { useRef, useEffect, useCallback, useState, RefObject, Dispatch} from 'react'import {fromEvent, Observable, Subscribable, Unsubscribable} from 'rxjs'import {map, debounceTime} from 'rxjs/operators'type NullableObservarbel = Observable<any> | null;type NUllabe = HTMLButtonElement | null;type NullableSubscribable = Subscribable<any> | nulltype NullableUnsubscribable = Unsubscribable | nullexport type Result = {    ref: RefObject<HTMLButtonElement>;    count:number;    updateCount:Dispatch<React.SetStateAction<number>>;}export const isString = (input:any):Boolean => (typeof input === "string" && input !== "")export const makeObservable = (el:NUllabe, eventType:string):NullableObservarbel => el instanceof HTMLElement && isString(eventType) ? fromEvent(el, eventType) : nullexport const useClick = (time:number = 500):Result => {    const button: RefObject<HTMLButtonElement> = useRef(null)    const [count, updateCount] = useState<number>(0)    const fireAfterSubscribe = useCallback((c) => {updateCount(c)}, [])    useEffect(():()=>void => {        const el = button.current        const observerble =  makeObservable(el, 'click')        let _count = count        let subscribable:NullableSubscribable = null        let subscribe:NullableUnsubscribable = null        if(observerble){            subscribable = observerble.pipe(                map(e => _count++),                debounceTime(time)            )            subscribe = subscribable.subscribe(fireAfterSubscribe)        }        return () => subscribe && subscribe.unsubscribe() // cleanup subscription    // eslint-disable-next-line    }, [])    return {ref:button, count, updateCount:fireAfterSubscribe}}

Above example, we have 2 files.

1 Button.tsx: is an simple button component.
2 useClick.ts: contains the custom hook useClick and makeObservable. functions.

Button uses useClick to delay the button clicks. Each clicks debounced with RxJs debounceTime function.

Clicks will be ignored while the user clicks within 400ms. Once the user has done clicks, it waits 400ms then fire the last event.

Simple!.

Now lets test! .

Let's start with something simple. Test the useState hook.

// useClick.test.tsx - v1import React from 'react'import {useClick} from './useClick'describe('useState', () => {    it('should update count using useState', () => {        const result = useClick(400) // test will break due to invarient violation        const {updateCount} = result        updateCount(8)         expect(result.current.count).toBe(8)    })})

Now runyarn test.

Invariant Violation: Invalid hook call. Hooks can only be calledinsideof the body of a function component....

Not the result that we expected.

The error above means that calling hooks outside the functional component body is Invalid.

In this case, we can use react hooks testing utility library @testing-library/react-hooks.

import {  renderHook } from '@testing-library/react-hooks

With renderHook we can call the hooksoutsideof the body of a function component.

lets just replace const result = useClick(400) with
const {result} = renderHook(() => useClick(400)

also, const {updateCount} = result with
const {updateCount} = result.current

Then wrap your setState call with act otherwise your test will throw an error.

// useClick.test.tsx -v2import React from 'react'import { useClick } from './useClick'import { renderHook, act as hookAct } from '@testing-library/react-hooks'describe('useState', () => {    it('should update count using useState', () => {        const {result} = renderHook(() => useClick(400))        const {updateCount} = result.current        hookAct(() => {            updateCount(8)         })        expect(result.current.count).toBe(8)    })})

Okay, now we good to go.

Again run yarn test.

Voila!. Test passing.

More tests

Now we test makeObservable function. Function makeObservable take DOMElement and event type as a string and should return Observable. It should return false if given an invalid argument(s).

Lets test makeObservable function.

// useClick.test.tsximport React from 'react'import { makeObservable, useClick } from './useClick'import {Observable} from 'rxjs'import Button from './Button'import { render } from '@testing-library/react'import { renderHook, act as hookAct } from '@testing-library/react-hooks'describe('useState', () => {    it('should update count using useState', () => {        const {result} = renderHook(() => useClick(400))        const {updateCount} = result.current        hookAct(() => {            updateCount(8)         })        expect(result.current.count).toBe(8)    })})describe('makeObservable', () => {    it('should return false for non HTMLElement', () => {        const observable = makeObservable({}, 'click')        expect(observable instanceof Observable).toBe(false)    })    it('should return false for non non string event', () => {        const {getByTestId} = render(<Button/>)        const el = getByTestId('btn') as HTMLButtonElement        const observable = makeObservable(el, 20)        expect(observable instanceof Observable).toBe(false)    })    it('should return false for null', () => {        const observable = makeObservable(null, 'click')        expect(observable instanceof Observable).toBe(false)    })    it('should create observable', () => {        const {getByTestId} = render(<Button/>)        const el = getByTestId('btn') as HTMLButtonElement        const observable = makeObservable(el, 'click')        expect(observable instanceof Observable).toBe(true)    })})

Test Subscriber and useEffect.

Testing useEffect and observable is the complicated part.

Because useEffect and makes your component render asynchronous.
Assertions that inside the subscribers never run so the tests are always passing.

To capture useEffect's side effect, we can wrap our test code with act from react-dom/test-utils.

To run assertions inside the subscription, we can use done(). Jest wait until thedonecallback is called before finishing the test.

// useClick.test.tsximport React from 'react'import {isString, makeObservable, useClick } from './useClick'import {Observable} from 'rxjs'import {map, debounceTime} from 'rxjs/operators'import Button from './Button'import { render, fireEvent, waitForElement } from '@testing-library/react'import {act} from 'react-dom/test-utils'import { renderHook, act as hookAct } from '@testing-library/react-hooks'describe('useState', () => {    it('should update count using useState', () => {        const {result} = renderHook(() => useClick(400))        const {updateCount} = result.current        hookAct(() => {            updateCount(8)         })        expect(result.current.count).toBe(8)    })})describe('makeObservable', () => {    it('should return false for non HTMLElement', () => {        const observable = makeObservable({}, 'click')        expect(observable instanceof Observable).toBe(false)    })    it('should return false for non non string event', () => {        const {getByTestId} = render(<Button/>)        const el = getByTestId('btn') as HTMLButtonElement        const observable = makeObservable(el, 20)        expect(observable instanceof Observable).toBe(false)    })    it('should return false for null', () => {        const observable = makeObservable(null, 'click')        expect(observable instanceof Observable).toBe(false)    })    it('should create observable', () => {        const {getByTestId} = render(<Button/>)        const el = getByTestId('btn') as HTMLButtonElement        const observable = makeObservable(el, 'click')        expect(observable instanceof Observable).toBe(true)    })})describe('isString', () => {    it('is a string "click"', () => {        expect(isString('click')).toEqual(true)    })    it('is not a string: object', () => {        expect(isString({})).toEqual(false)    })    it('is not a string: 9', () => {        expect(isString(9)).toEqual(false)    })    it('is not a string: nothing', () => {        expect(isString(null)).toEqual(false)    })})describe('Observable', () => {    it('Should subscribe observable', async (done) => {        await act( async () => {            const {getByTestId} = render(<Button/>)            const el = await waitForElement(() => getByTestId('btn')) as HTMLButtonElement            const observerble =  makeObservable(el, 'click');            if(observerble){                let count = 1                observerble                    .pipe(                        map(e => count++),                        debounceTime(400)                    )                    .subscribe(s => {                        expect(s).toEqual(6)                        done()                    })                fireEvent.click(el)                fireEvent.click(el)                fireEvent.click(el)                fireEvent.click(el)                fireEvent.click(el)                fireEvent.click(el)            }        })    })})

And button component test

// Button.test.tsximport React from 'react'import ReactDOM from 'react-dom'import Button from './Button'import { render, fireEvent, waitForElement, waitForDomChange } from '@testing-library/react'describe('Button component', () => {    it('renders without crashing', () => {        const div = document.createElement('div');        ReactDOM.render(<Button />, div);        ReactDOM.unmountComponentAtNode(div);    });})describe('Dom updates', () => {    it('should update button label to "Hello 2"', async (done) => {        const {getByTestId} = render(<Button interval={500}/>)        const el = await waitForElement(() => getByTestId('btn')) as HTMLButtonElement        fireEvent.click(el)        fireEvent.click(el)        fireEvent.click(el)        const t = await waitForDomChange({container: el})        expect(el.textContent).toEqual('Hello 2')        done()    })})

Now run yarn test again.

Now everything runs as expected, and you can see code coverage results and its more than 90%.

In this post, we've seen how to write tests for React Hooks that RxJS observable that's inside the custom hook with the react-testing-library.

If you have any questions or comments, you can share them below.

kamaal- / react-hook-rxjs-test

Test react hook & RxJs.

Test react hook & RxJs

View on GitHub

Original Link: https://dev.to/kamaal/a-quick-guide-to-testing-react-hooks-that-use-rxjs-4lpa

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To