在反应组件渲染函数中调用的模拟函数

Question

首先，我想告诉大家我是 React 测试的新手，想验证我是否编写了正确的测试。

我有一个像这样的 React 组件 -

import React, { Component } from "react";

class DemoComponent extends Component
{
    returnSomething()
    {
       return "something";
    }

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

我正在写信来测试验证方法调用是这样的 -

import React from "react";
import { shallow } from "enzyme";
import DemoComponent from "./DemoComponent.js";

const component = shallow(<DemoComponent/>); 

test('"returnSomething" method is called when the component is rendered', () => {
    component.instance().returnSomething= jest.fn();
    component.update();
    component.instance().render();
    expect(component.instance().returnSomething).toHaveBeenCalled();
});

测试运行正常，但我想知道我写的测试是否正确。

Answer 1

您在这里编写了一个通过的测试，所以我没有发现问题。

只是测试调用了组件上的某些方法并不能真正告诉您有关 render() 结果的任何信息 - 组件如何呈现。正如 Andreas 指出的那样，测试 render() 的快照可能更好（假设您使用的是 Jest）——这样您就可以测试实际的渲染结果，而不仅仅是检查在渲染期间是否调用了某些方法。或者，您可以使用 .matchesElement() 之类的东西或检查各个属性来创建更强大的测试。

在反应组件渲染函数中调用的模拟函数

mock function that is called inside react component render function

unit-testing

reactjs

jestjs

enzyme