web-dev-qa-db-ja.com

子コンポーネントがレンダリングされているかどうかを確認する-Jest、Enzyme

単体テストでは、親コンポーネントが子コンポーネントを正常にレンダリングしているかどうかをテストします。コードは次のとおりです。

describe('Parent Component', () => {
  it('renders Child component', () => {
    const wrapper = shallow(<Parent store={store} />);
    expect(wrapper.find(Child).length).toEqual(1);
  });
});

親：

const Parent = observer(({ store }) => {
  const bookList = toJS(store.planets);
  return (
    <div>
      <div className={style.planet_container}>
        {bookList.map(book => {
          return <Child key={book.name} name={book.name} />;
        })}
      </div>
    </div>
  );
});

上記のコードは here から取られていますが、機能していません。次のエラーが表示されます。

予想1、受信0 '

どこがおかしいの？ Jest 23.1.0でEnzyme 3.3を使用しています。

javascriptreactjsjestjsenzyme
6
maverick

小道具（この場合は小道具「ストア」）を正しくモックしていないため、子はレンダリングされません。

これを試して：

it('renders Child component', () => {
  const wrapper = shallow( < Parent / > );
  wrapper.setProps({
    store: {
      planets: [{
          name: "name 1"
        }
      ]
    }
  });
  expect(wrapper.find(Child)).toHaveLength(1);
});
2
Felipe Suárez