Zenn
Closed3

Enzyme から React Testing Library への移行

JavaScript
Test
enzyme
Takanori IshikawaTakanori Ishikawa
  • Enzyme は Component に実装に依存しているため、メンテが大変
  • 一方、React Testing Library は Render 結果である DOM 構造をテストするので分かりやすい。実際のユーザー行動に近い
  • しかし、思想自体が異なるので自動的に移行は無理
Takanori IshikawaTakanori Ishikawa

import

enzyme
import React from 'react';
import { shallowWithIntl } from '../../testUtil/IntlEnzymeTestHelper';
import { MyComponent } from "components/MyComponent";
react-testing-library
import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { render, screen } from '../../testUtil/TestingLibraryReact';
import { MyComponent } from "components/MyComponent";

render

enzyme
const wrapper = await shallowWithIntl(<MyComponent {...props} />);
react-testing-library
render(<MyComponent {...props} />);

DOM 構造を表示

react-testing-library
screen.debug();

テキストで検索

検索したノードが存在する

expect(screen.getByText('Text')).not.toBeEmptyDOMElement();

検索したノードが存在しない

expect(screen.queryByText('Text')).toBeNull();
Takanori IshikawaTakanori Ishikawa

Custom Render で Wrapper Component にオプションを渡したい。

Custom Render を使うとき、Wrapper Component にオプションを渡したいときがある。たとえば、Redux Store の初期値を与えるためなど。

以下のような実装で、render(<MyComponent />, { wrapperOptions: ...}) として渡すことができる。

const wrapper = ({ children }, options = {}) => {
  const mockStore = configureStore();
  const store = mockStore(_.merge({
    books: {}
  }, options.store));
...
};

const customRender = (ui, options = {}) => render(ui, { wrapper: (props) => wrapper(props, options.wrapperOptions), ...options });
このスクラップは2021/10/17にクローズされました