修改

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＆＃39; 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)

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

修改

2 个答案: