web-dev-qa-db-ja.com

Jestの基本：コンポーネントからの機能のテスト

私は基本的な機能を持っています：

components/FirstComponent：

sayMyName = (fruit) => {
    alert("Hello, I'm " + fruit);
    return fruit;
}

FirstComponent.test.js内のJestでテストしようとすると、

import FirstComponent from '../components/FirstComponent';

describe('<FirstComponent />', () => {
    it('tests the only function', () => {
        FirstComponent.sayMyName = jest.fn();
        const value = FirstComponent.sayMyName('orange');
        expect(value).toBe('orange');
    });
});

テストは言う：2つの異なるタイプの値を比較します。文字列が必要ですが、未定義を受け取りました。

どうやら、正しい方法でテストするための関数をインポートしていませんか？

コンポーネントから関数をテストする方法をJestのドキュメントを理解するのに十分なほど賢くありませんでした。

コンポーネントから関数をインポートしてテストする簡単な方法はありますか？

編集：これは 'react-test-renderer'を使用して動作します

import FirstComponent from '../components/FirstComponent';
import renderer from 'react-test-renderer';

describe('<FirstComponent /> functions', () => {
        it('test the only function', () => {
            const wrapper = renderer.create(<FirstComponent />);
            const inst = wrapper.getInstance();
            expect(inst.sayMyName('orange')).toMatchSnapshot();
        });
})
javascriptunit-testingreactjsjest
5
Jack M.

何も返さない関数で関数をスタブしました。 FirstComponent.sayMyName = jest.fn();

関数をテストするには、通常、次のようにします

_// if static etc
import { sayMyName } from '../foo/bar';

describe('bar', () => {
  it('should do what I like', () => {
    expect(sayMyName('orange')).toMatchSnapshot();
  });
})
_

これにより、出力（「オレンジ」）が保存され、このテストを実行するたびにオレンジ色に戻るはずです。関数がそれを停止したり、何か他のものを返したりすると、スナップショットは異なり、テストは失敗します。

直接比較.toBe('orange')は引き続き可能ですが、jestの本当に便利な点はスナップショットテストであるため、ロジックを複製したり、シリアライズ/ディープ比較構造やjsxを実行したりする必要はありません。

コンポーネントメソッドの場合は、最初にgetInstance()をレンダリングしてから呼び出す必要があります。

2
Dimitar Christoff