web-dev-qa-db-ja.com

React classNameの酵素ジェストテストコンポーネント

。find（） の酵素の例とこのGitHub enzyme-example-jest の例の両方に従って、最も外側の要素をテストおよび検証するための基本コンポーネントを取得していますclassNameが存在しますが、なぜこれが渡されないのかわかりません。

// REACTコンポーネント

_class VisitorShortcut extends Component {
//all the props & lifecycle hooks here
render() {
        return (
            <div className="visitor-shortcuts"> // <-- this className is being tested
                <div
                    onClick={e => e.stopPropagation()}
                    className="dropdown open"
                >
                    <ul
                        style={style}
                        ref="shortcutContainer"
                        className={"dropdown-menu "}
                    >
                        {results}
                    </ul>
                </div>
            </div>
        );
    }
}
_

//テストファイル

_import React from "react";
import { shallow, mount } from "enzyme";
import VisitorShortcut from "../VisitorShortcut";

describe("Shortcuts", () => {
  test("The main Class exists", () => {
    expect(
        (<VisitorShortcut />).find(".visitor-shortcuts").length
    ).toBe(1);
  });
});
_

//出力

_Expected value to be (using ===):
  1
Received:
  0
_

enzymeのドキュメントに従ってexpect(wrapper.find('div.some-class')).to.have.length(3);に切り替えると、出力は_TypeError: Cannot read property 'have' of undefined_になります。

mountの代わりにshallowAPIを使用する必要はないと確信しています。

これを明確にするのを手伝ってくれてありがとう。それはとても基本的なようです...

reactjsenzymejest
3
Phil Lucks

chai を使用します。動作します。

import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import App from './App';

describe('<App />', () => {
  const wrapper = shallow(<App />);

  it('should have an App class', () => {
    expect(wrapper.find('.App')).to.have.length(1);
  });
});
1
mfakhrusy

以下のコードは私のために働いた

import React from "react";
import { shallow, mount } from "enzyme";
import { assert } from 'chai';
import VisitorShortcut from "../VisitorShortcut";    


describe("Shortcuts", () => {
  test("The main Class exists", () => {
    const wrapper = shallow(<VisitorShortcut />);
    const visitorShortcutsWrapper = wrapper.find('.visitor-shortcuts');
    assert.equal(visitorShortcutsWrapper.length, 1);
  });
});

ちなみに、私はassertパッケージのchaiを使用しています。

1
Chirag Swadia

私の完全なコードベースが持っているnullを返していたものがあったことが判明しました。そのため、node.length = 0です。これを調べていただきありがとうございます。

0
Phil Lucks