web-dev-qa-db-ja.com

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

すべてが良いです。しかし、酵素を使用しているときにFoo.jsでcustomFunctionを単体テストする方法がわかりませんでした

reactjsenzyme
16
pnsrinivasreddy

この質問に対する最良の答えは、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
_
27
Leland Richardson

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には、カスタム関数のテストをはるかに簡単にするチェーン可能なゲッターもいくつかあります。より詳細な説明については、 docs を参照してください。

1
gbenavid