web-dev-qa-db-ja.com

テストReact Jestを使用したcomponentWillUnmount

私はReactのTestUtil.renderIntoDocumentを使用して、Reactコンポーネントクラス、 （like this） をテストしています）（私はBabelの代わりにTypeScriptのみを使用しています）。

describe("MyComponent", () => {
  it("will test something after being mounted", () => {
    var component = TestUtils.renderIntoDocument(<MyComponent />);
    // some test...
  })
})

これは機能しますが、componentWillUnmountが期待どおりに動作することを確認するテストを作成したいと思います。ただし、テストランナーがコンポーネントをアンマウントすることはないようです。これは驚くべきことではありません。だから私の質問は、テスト内からコンポーネントをアンマウントするにはどうすればよいですか？ TestUtilには、思い通りのremoveFromDocumentのようなものはありません。

reactjsjestjs
12
Aaron Beall

そのとおりですが、_TestUtils.renderIntoDocument_は、コンポーネントのライフサイクルメソッドにアクセスできるReactComponentを返します。

したがって、手動でcomponent.componentWillUnmount()を呼び出すことができます。

5
ncuillery

_enzyme 3_ライブラリのshallow()およびunmount()を使用して、ライフサイクルメソッドが次のように呼び出されたかどうかをテストできます。

_it(`lifecycle method should have been called`, () => {
  const componentDidMount = jest.fn()
  const componentWillUnmount = jest.fn()

  // 1. First extends your class to mock lifecycle methods
  class Foo extends MyComponent {
    constructor(props) {
      super(props)
      this.componentDidMount = componentDidMount
      this.componentWillUnmount = componentWillUnmount
    }

    render() {
      return (<MyComponent />)
    }
  }

  // 2. shallow-render and test componentDidMount
  const wrapper = shallow(<Foo />)

  expect(componentDidMount.mock.calls.length).toBe(1)
  expect(componentWillUnmount.mock.calls.length).toBe(0)

  // 3. unmount and test componentWillUnmount
  wrapper.unmount()

  expect(componentDidMount.mock.calls.length).toBe(1)
  expect(componentWillUnmount.mock.calls.length).toBe(1)
})
_
16
bob
Step1: Use "jest.spyOn" on "componentWillUnmount" method.
Step2: Trigger unmount on the mounted component.
Finally: check if componentWillUnmount is called when component is unmounted

コード

it('componentWillUnmount should be called on unmount', () => {
    const component = createComponent();
    const componentWillUnmount = jest.spyOn(component.instance(), 'componentWillUnmount');
    component.unmount();
    expect(componentWillUnmount).toHaveBeenCalled();
});
7
D P Venkatesh
import { mount } from 'enzyme';
import ReactDOM from 'react-dom';
...

let container;
beforeEach(() => {
   container = document.createElement("div");
   mount(<YourReactComponent />, {attachTo: container});
});

afterEach(() => {
    ReactDOM.unmountComponentAtNode(container);
});
1
Maciej Zawiasa