单元测试无状态组件方法

Question

I have this stateless component of react

const Clock = () => {
    const formatSeconds = (totalSeconds) => {
        const seconds = totalSeconds % 60,
        minutes = Math.floor(totalSeconds / 60)

        return `${minutes}:${seconds}`
    }
    return(
        <div></div>
    )
}

export default Clock

How to test formatSeconds method?

I wrote this, which the test has failed.

import React from 'react'
import ReactDOM from 'react-dom'
import expect from 'expect'
import TestUtils from 'react-addons-test-utils'

import Clock from '../components/Clock'

describe('Clock', () => {
    it('should exist', () => {
        expect(Clock).toExist()
    })

    describe('formatSeconds', () => {
        it('should format seconds', () => {
            const Clock = TestUtils.renderIntoDocument(<Clock />)
            const seconds = 615
            const expected = '10:15'
            const actual = Clock.formatSeconds(seconds)

            expect(actual).toBe(expected)
        })
    })
})

The first test passed but maybe there's some problem doing Clock.formatSeconds.

Answer 1

The component Clock is a function, which is invoked when the component is rendered. The method formatSeconds is defined inside the the Clock closure, and it's not a property of Clock , so you can't reach it from outside.

In addition, you are recreating the formatSeconds method on every render, and since the method doesn't actually use any prop in the scope, it's a bit wasteful. So, you can take the method out, and export it. You can also move it to another utility file, and import it, since it's not an integral part of Clock , and you might want to reuse it other places.

export const formatSeconds = (totalSeconds) => {
    const seconds = totalSeconds % 60,
    minutes = Math.floor(totalSeconds / 60)

    return `${minutes}:${seconds}`
}

const Clock = () => {
    return(
        <div></div>
    )
}

export default Clock

Now testing is easy as well:

import React from 'react'
import ReactDOM from 'react-dom'
import expect from 'expect'
import TestUtils from 'react-addons-test-utils'

import Clock, { formatSeconds } from '../components/Clock' // import formatSeconds as well

describe('Clock', () => {
    it('should exist', () => {
        expect(Clock).toExist()
    })

    describe('formatSeconds', () => {
        it('should format seconds', () => {
            const seconds = 615
            const expected = '10:15'
            const actual = formatSeconds(seconds) // use it by itself

            expect(actual).toBe(expected)
        })
    })
})

Answer 2

A little late to the party but I have two approaches I would like to share with you. Right out of the box you cannot test private methods. Regardless if it is a stateless component or just a simple function with some private internals. I have for one use the following approaches:

1. Transform the stateless component into a class with public methods. Yeah, this kinds beats the purpose. But it is still an option.

2. Keep the stateless component and declare the private methods as "static".

 const Button = onClick => { return <button onClick={Button.handleClick}> My Button </button>; } Button.handleClick = e => e.stopPropagation(); ReactDOM.render(<Button />, document.getElementById('root')); 

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>