17

我正在使用 mocha、酶创建反应组件的单元测试。下面是一个示例组件。

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);
    });
});

万事皆安。但是当我们使用酶时，我不明白如何在 Foo.js 中对 customFunction 进行单元测试

4

2 回答 2

27

这个问题的最佳答案实际上取决于它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
于 2016-03-01T17:32:43.527 回答
1

您还可以使用 chai 插件来监视 jsx 文件中的自定义函数。

// to use this pluggin add this to the top of your testing file

const chai = require("chai"), spies = require("chai-spies");
chai.use(spies);
import Foo from "./<path to component>/Foo.jsx";

describe("Foo", () => {
  it("a call to customFunction will not error", () => {
    let spy = chai.spy(Foo.prototype, "customFunciton"); // spy
    const wrapper = mount(<Foo/>);
    wrapper.setProps({bar: "baz"}); // manipulate you component in some way
    expect(spy).to.have.been.called.once();
  });
});

@leland-richardson是对的，这取决于您的测试在做什么。理解这一点将帮助您编写新的方法来操作您的组件，从而做出断言。

另一个测试更新组件状态的函数的示例。

it("function will assert new state", () => {
  const wrapper = shallow(<Foo {...props}/>);
  wrapper.instance.customFunction(); // call custom function
  wrapper.update();
  expect(wrapper.state("bar")).to.equal("new-state");
});

Chai-spies 也有一些可链接的 getter，使测试自定义函数变得更加容易。请参阅文档以获得更深入的解释。

于 2018-06-20T15:03:45.647 回答