web-dev-qa-db-ja.com

jestと酵素を使用してcomponentWillMountをスパイする方法

ComponentWillMountが呼び出されたかどうかをテストしようとしていますが、そのために私のテストは

test('calls `componentWillMount` before rendering', () => {
  let fn = jest.fn(SomeComponent.prototype.componentWillMount)
  mount(<SomeComponent />)
  expect(fn).toHaveBeenCalled()
})

ただし、componentWillMountメソッドが呼び出されても、テストはパスしません。ここに何が欠けていますか？

unit-testingreactjsjestjsenzyme
10
sidoshi

他の回答があなたの質問に役立ったかどうかはわかりませんが、componentWillMountをテストする必要はありません。 Reactは既にテストを行っているはずです。

テストにより関連するのは、コンポーネントのそのメソッドに入れている機能またはアクションをテストすることです。

何らかのAPI呼び出しを行う場合、小道具などに基づいて関数を実行する場合は、テストする必要があります。 componentWillMountがトリガーする関数/アクション/コードをモックし、それについてアサーションと期待を行います。

例：

成分：

class YourComponent extends Component {

  componentWillMount() {
    /*this fetch function is actually what you want to test*/
    this.props.fetch('data')
  }

  render() {
    /* whatever your component renders*/ 
  }    
}

テスト：

test('should call fetch when mounted', () => {
  let mockFetch = jest.fn()

  const wrapper = mount(<SomeComponent fetch={mockFetch}/>);

  expect(wrapper).toBeDefined();
  expect(mockFetch).toHaveBeenCalled();
  expect(mockFetch.mock.calls[0]).toEqual(['data'])
});
18
scotthorn0

これを試して：

test('calls `componentWillMount` before rendering', () => {
  const onWillMount = jest.fn();
  SomeComponent.prototype.componentWillMount = onWillMount;
  mount(<SomeComponent />);

  expect(onWillMount).toBeCalled();
});
3
devellopah

まず、コンポーネントのspyメソッドでcomponentWillMountメソッドを使用しますが、.and.CallThrough()を使用して、コンテンツのモックを防止します。お役に立てれば：

it('should check that the componentWillMount method is getting called', () => {
    spyOn(SomeComponent.prototype, 'componentWillMount').and.callThrough();

    const wrapper = mount(<SomeComponent />);

    expect(wrapper).toBeDefined();
    expect(SomeComponent.prototype.componentWillMount).toHaveBeenCalledTimes(1);
});
2
manosim

上記の答えが問題に対処するとは思わない。これは、メソッドのspyOnを許可しますが、呼び出しステータスをスパイ中にcallThroughを許可しません。私にとって最も効果的な解決策は、componentWillMountが定義されているコンポーネントでテストをセットアップすることです。 jestに頼ると、事態はさらに複雑になります。

describe('componentWillMount', () => {
  const calls = []
  class Component1 extends Components {
    componentWillMount() {
      calls.Push(new Date)
    }
    render() { ... }
  }
  
  afterEach(() => calls.splice(0, calls.length))
  it('has been called', () => {
    mount(<Component1 />)
    expect(calls.length).toBe(1)
  })
})
0
user2167582