reactjs - 摩卡、 enzyme : Unit testing custom functions in react component using enzyme

Question

我正在致力于使用摩卡、 enzyme 创建 react 组件的单元测试。下面是一个示例组件。

Foo.js

class Foo extends React.Component {
    customFunction=() => {
    }

    render() {
        return (<div className={this.props.name}/>);
   }
}

这是测试文件。

Foo-Test.js

import React from 'react';
import { expect } from 'chai';
import { shallow, mount, render } from 'enzyme';
import Foo from '../src/Foo';

describe("A suite", function() {
    it("contains spec with an expectation", function() {
        expect(shallow(<Foo />).contains(<div className="foo" />)).to.equal(true);
    });

    it("contains spec with an expectation", function() {
        expect(shallow(<Foo />).is('.foo')).to.equal(true);
    });
});

一切都很好。但我不明白当我们使用 enzyme 时如何在 Foo.js 中对 customFunction 进行单元测试

Answer 1

这个问题的最佳答案实际上取决于 customFunction 实际在做什么......

您可以像这样调用该函数:

wrapper.instance().customFunction('foo', 'bar');

如果它是一个在实例本身上设置状态的函数，从而影响渲染输出的外观，您可能还需要调用 .update()

wrapper.instance().customFunction('foo', 'bar'); // uses setState internally
wrapper.update(); // updates render tree
// do assertions on the rendered output