有没有更好的方法来测试一个类的各个方法

Question

我有一个包含多个方法的组件类。我希望能够单独测试这些方法中的每一个。到目前为止，我已尝试单独导出每个以进行测试并在创建后将它们添加到类中，例如：

export const getStrFun = () => 'lorem ip'
export const getNumFun = n => n
export const getJsxFun = (el, i) => <li key={i}>{el}</li>
class MyClass extends Component {
  getStrFun = getStrFun
  getNumFun = getNumFun
  getJsxFun = getJsxFun
  render() {
    return (
      <section>
        <p>{this.getStrFun()}</p>
        <p>{this.getNumFun(2)}</p>
        <ol>{['abc', '123', 'αβγ'].map(this.getJsxFun)}</ol>
      </section>
    )
  }
}

export default MyClass

然后在 myClass.test.js 中设置我的测试

import MyClass, { getStrFun, getNumFun } from '../MyClass'

describe('<MyClass', () => {
  it('should render the component', () => {
    const component = renderer.create(<MyClass />)
    const tree = component.toJSON()
    expect(tree).toMatchSnapshot()
  })

  it('should return the number it is given', () => {
    const number = 100
    const result = getNumFun(number)
    expect(result).toEqual(number)
  })

  it('should return a string', () => {
    const result = getStrFun()
    expect(result).toEqual(expect.any(String))
  })
})

似乎有效：

<MyClass
  ✓ should render the component (16ms)
  ✓ should return the number it is given (1ms)
  ✓ should return a string (1ms)

我在其他地方没有见过这样的方法，但我也没有找到很多关于如何测试类中存在的方法的信息，所以

测试 React 类的各个方法的规范方法是什么？

编辑

这些测试很简单，没有任何用处；它们只是对这个想法的展示。我不是在问它们的用处或如何为它们设计测试。

Answer 1

我一直在遵循一种方法来测试组件的方法。如果您使用enzyme，则可以使用此方法。为此，您需要使用enzyme 的shallow 对组件进行浅层渲染，然后调用instance().myMethod() 调用名为myMethod 的方法。

这是一个小例子。

反应组件：

class Welcome extends React.Component {
    sayHello = () => {
       return(
           <h1>Hey there!</h1>
       );
    }

    sayBye = () => {
        return "Bye Bye!!"
    }

    render() {
        return(
            <div>{this.sayHello()}</div>
        );
    }
} 

上述组件的测试套件：（假设您使用的是jest 和enzyme。）

import {shallow} from 'enzyme';

describe('Test sayHello and sayBye method', () => {
   const componentTree = shallow(
       <Welcome />
   );

   it('should display a greeting message', () => {
       const returnedValue = shallow(componentTree.instance().sayHello());
       expect(returnedValue.text()).toEqual('Hey there!');
       expect(returnedValue.find('h1').length).toBe(1);
   });
});

这里需要注意的一点是，我们的sayHello 方法返回了一个JSX 元素，这就是我们再次浅渲染它以利用shallow rendering api 的原因

如果我们只是测试sayBye方法，我们可以将方法的返回值与期望值进行比较。

// Testing sayBye method
it('should say Bye Bye!!', () => {
    expect(componentTree.instance().sayBye()).toEqual('Bye Bye!!');
});

希望这会有所帮助:)

Answer 2

从技术上讲，您并没有测试任何东西；您正在调用该方法以及绑定到该方法的函数，然后比较它们的结果，这些结果总是相同的。你已经有效地做到了：

expect(someFunction()).toEqual(someFunction())

单元测试的重点是调用函数或方法，然后将其与硬编码的值进行比较。

首先，将您的方法放入您的类中。接下来，在单独的测试中调用这些方法中的每一个，然后将值与您手动放入测试中的值进行比较。

expect(someFunction()).toEqual('a hard-coded result')

即使结果比这更复杂，您也应该始终比较硬编码版本。同样，测试一个类可能是这样的：

let instance = new SomeClass()
expect(instance.someMethod()).toEqual('a hard-coded result')
expect(instance.anotherMethod()).toEqual(true)