タグ付けされた質問 「enzyme」

Jasmine Enzymeの浅いレンダリングでReactコンポーネントをテストしています。 この質問のためにここでは簡略化しています... function MyOuterComponent() { return ( <div> ... <MyInnerComponent title="Hello" /> ... <MyInnerComponent title="Good-bye" /> ... </div> ) } MyOuterComponentの2つのインスタンスがMyInnerComponentあり、それぞれで小道具をテストしたいと思います。 最初にテストする方法を知っています。で使用findしていfirstます... expect(component.find('MyInnerComponent').first()).toHaveProp('title', 'Hello'); ただし、の2番目のインスタンスをテストするのに苦労していますMyInnerComponent。 このようなものがうまくいくことを願っていました... expect(component.find('MyInnerComponent').second()).toHaveProp('title', 'Good-bye'); またはこれ... expect(component.find('MyInnerComponent')[1]).toHaveProp('title', 'Good-bye'); しかし、もちろん上記のどちらも機能しません。 私は明らかなことを逃しているように感じます。 しかし、ドキュメントを調べても、類似した例はありません。 誰でも？

128 reactjs  jasmine  enzyme 

この質問を投稿する前に、sqa stackexchangeで検索してみましたが、浅い投稿は見つかりませんでした。そこで、誰かが私を助けてくれるといいのですが。 反応コンポーネントのテストでシャローおよびレンダリングを使用する必要があるのはいつですか？airbnb docsに基づいて、私は2つの違いについていくつかの意見を述べました： シャローはコンポーネントを1つの単位としてテストするので、「親」コンポーネントに使用する必要があります。（例：テーブル、ラッパーなど） レンダーは子コンポーネント用です。 私がこの質問をした理由は、どちらを使用するべきかを判断するのに苦労しているためです（ドキュメントには非常によく似ていると記載されていますが）。 それで、特定のシナリオでどれを使用するかをどうやって知るのですか？

95 testing  meteor  reactjs  chai  enzyme 

を<input>使用するときに値にアクセスする方法について混乱していますmount。これが私のテストとして得たものです： it('cancels changes when user presses esc', done => { const wrapper = mount(<EditableText defaultValue="Hello" />); const input = wrapper.find('input'); console.log(input.render().attr('value')); input.simulate('focus'); done(); }); コンソールが印刷されundefinedます。しかし、コードを少し変更すると、機能します。 it('cancels changes when user presses esc', done => { const wrapper = render(<EditableText defaultValue="Hello" />); const input = wrapper.find('input'); console.log(input.val()); input.simulate('focus'); done(); }); もちろん、input.simulate私がrender今使っているので、回線が失敗することを除いて。正しく動作するには両方が必要です。これを修正するにはどうすればよいですか？ 編集： …

91 unit-testing  reactjs  enzyme 

ボタンクリックのシミュレーションは、非常に簡単で標準的な操作のようです。それでも、Jest.jsテストで動作させることはできません。 これは私が試したものです（そしてjQueryを使用してそれを実行しました）が、何もトリガーされなかったようです： import { mount } from 'enzyme'; page = <MyCoolPage />; pageMounted = mount(page); const button = pageMounted.find('#some_button'); expect(button.length).toBe(1); // It finds it alright button.simulate('click'); // Nothing happens

83 javascript  reactjs  testing  jestjs  enzyme 

typescriptを使用して反応ルーターv5.1.2でUseHistoryフックを使用していますか？単体テストを実行すると、問題が発生します。 TypeError：未定義のプロパティ 'history'を読み取れません。 import { mount } from 'enzyme'; import React from 'react'; import {Action} from 'history'; import * as router from 'react-router'; import { QuestionContainer } from './QuestionsContainer'; describe('My questions container', () => { beforeEach(() => { const historyHistory= { replace: jest.fn(), length: 0, location: { pathname: '', search: …

18 reactjs  typescript  react-router  jestjs  enzyme 

material-uiにMyStyledButton基づくカスタムボタン（）を作成しました。 Button import React from "react"; import { Button } from "@material-ui/core"; import { makeStyles } from "@material-ui/styles"; const useStyles = makeStyles({ root: { minWidth: 100 } }); function MyStyledButton(props) { const buttonStyle = useStyles(props); const { children, width, ...others } = props; return ( <Button classes={{ root: buttonStyle.root }} …

16 javascript  css  reactjs  jestjs  enzyme