Question

首先，我想让我知道我是新手，并且想要验证我是否正在编写正确的测试。

我有一个像这样的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()之类的内容或检查单个属性来创建更强大的测试。

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

1 个答案: