PuppeteerのjQueryでReact制御コンポーネントの値を設定するにはどうすればよいですか？

Question

私はPuppeteerを使ってReactアプリケーションでいくつかのテストを行っています。問題は、制御された入力は、単にDOM値を設定することによってそれらとやり取りするときに、その値を仮想DOMまたはアプリケーションの状態に保存しないということです。私はthis回答に基づいて、次の解決策を考え出した研究の数日後

：

describe('<HomePage />', async() => { 
    eval('jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000;'); //eslint-disable-line 
    it('should make some new element visible', async() => { 
    const browser = await puppeteer.launch({ headless: false }); 
    const page = await browser.newPage(); 
    await page.goto('http://localhost:3000/links'); 
    await page.waitForSelector('input', { visible: true }); 
    await page.addScriptTag({ url: 'https://code.jquery.com/jquery-3.2.1.min.js' }); 
    const someNewElement = await page.evaluate(() => { 
     const $ = window.$; 

     function doEvent(obj, event) { 
     /* Created by David@Refoua.me */ 
     const newEvent = new Event(event, { target: obj, bubbles: true }); 
     return obj ? obj.dispatchEvent(newEvent) : false; 
     } 

     const mySelect = $('[name="mySelect"]')[0]; 
     mySelect.value = 'MakeSomeNewElementVisible'; 

     // for input dispatch -> input, for select dispatch -> change 
     doEvent(mySelect, 'change'); 

     return $('#someNewElement_was_made_visible').length; 
    }); 
    expect(someNewElement).toEqual(1); 
    setTimeout(() => { browser.close(); }, 3000); 
    }); 
}); 

私の質問は：どのように私はいくつかのjQueryの機能をdoEvent機能を置き換えるのですか？ここで

Answer 1

はあなたがあれば、セレクタを微調整することができ、私はあなたは、単に以下を使用し、その場合には、リストからオプションを選択しようとしていると仮定し、あなたの問題のためにはるかに優れたソリューション、 ある

page.select('[name="mySelect"]', 'MakeSomeNewElementVisible'); 

これは適切ではありませんでした。私は人形師があなたのために重労働をさせることをお勧めします。

.evaluateを使用していくつかのイベントをディスパッチする必要がある場合は、this answerまたはthis oneを調べることができます。

イベントを実行してからしばらくお待ちください。一部のイベントに移行/遅延が追加されている可能性があります。さもなければ、要素がDOM内で可視になる前でも結果を返すことになるかもしれません。