Question

我有这个无状态的反应组件

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

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

export default Clock

如何测试formatSeconds方法？

我写了这个，测试失败了。

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)
        })
    })
})

第一次测试通过但可能在执行Clock.formatSeconds时遇到了一些问题。

Answer 1

组件#include <stdio.h> #include <string.h> int main(void) { printf("Chat simulator!\n"); for (;;) { char buf[100]; printf("[User1] "); if (!fgets(buf, sizeof buf, stdin)) break; buf[strcspn(buf, "\n")] = '\0'; /* strip the newline if present */ if (strcmp(buf, "Hello") == 0) { printf("[User2] Hello!\n"); } } return 0; }是一个函数，在呈现组件时会调用该函数。方法Clock在formatSeconds闭包内定义，并且它不是Clock的属性，因此您无法从外部访问它。

此外，您正在每个渲染上重新创建Clock方法，并且由于该方法实际上并未使用范围中的任何道具，因此它有点浪费。因此，您可以将该方法取出并导出。您也可以将其移动到另一个实用程序文件并导入它，因为它不是formatSeconds的组成部分，您可能希望在其他地方重复使用它。

Clock

现在测试也很简单：

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

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

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

export default Clock

Answer 2

派对有点晚了，但我有两种方法可以与你分享。开箱即用，您无法测试私有方法。无论它是无状态组件还是仅具有一些私有内部的简单功能。我有一个使用以下方法：

使用公共方法将无状态组件转换为类。是的，这种打败了目的。但它仍然是一种选择。
保留无状态组件并将私有方法声明为＆＃34;静态＆＃34;。

＆＃13;

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

＆＃13;

<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>

＆＃13;

单元测试无状态组件方法

2 个答案: