Check the page's content after a reload on Jest with Puppeteer

Question

I'm developing a nodejs library similar to live-reload/browser-sync and I'm using jest-puppeteer for the automated tests.

When I manually test my library, opening the browser and modifying a file, voilá, the pages refreshes (through an injected code that runs a location.reload( true ) when it receives a signal through a websocket).

But when I run the test with Jest, it seems that Puppeteer doesn't get the refresh.

// "reloader" is my library
import reloader from './../src/index';

import * as fs              from 'fs';
import { promisify }        from 'util';

const read  = promisify( fs.readFile )
const write = promisify( fs.writeFile )

test('1. Refresh when file changes', async () => {

    const server  = await reloader( { dir: 'test/01' } );

    await page.goto( 'http://localhost:' + server.port );

    // This test passes
    await expect( page.title()).resolves.toMatch( 'Old title' );

    // Read and modify index.html to generate a refresh 
    const file    = 'test/01/index.html'
    const content = await read( file, 'utf8' );
    await write( file, content.replace( 'Old title', 'New title' ) );

    // Wait the page to refresh
    await page.waitForNavigation( { waitUntil: 'networkidle2' } )

    // This test doesn't pass
    // Still receiving "Old title" 
    await expect( page.title()).resolves.toMatch( 'New title' );

    // Undo the changes
    write( file, content );

});

On the last test, instead of receiving the New title (that is being written correctly in the index.html file), I'm still receiving Old title

score 0 · Accepted Answer · answered Jun 04 '19 at 15:04

The tests were failing because the last part bellow the comment \\ Undo the changes weren't running, and the test file remained with the New title.

With the test below, it worked perfectly:

import reloader from './../src/index';

import * as fs              from 'fs';
import { promisify }        from 'util';

const read  = promisify( fs.readFile )
const write = promisify( fs.writeFile )

test('1. Refresh when file change', async () => {

    // If this test failed previously, lets guarantee that
    // everything is correct again before we begin
    const file    = 'test/01/index.html'
    const content = ( await read( file, 'utf8' ) ).replace( 'New title', 'Old title' );
    await write( file, content );

    const server  = await reloader( { dir: 'test/01' } );

    await page.goto( 'http://localhost:' + server.port );

    await expect( page.title()).resolves.toMatch( 'Old title' );

    // Read and modify index.html to generate a refresh 
    await write( file, content.replace( 'Old title', 'New title' ) );

    // Wait the page to refresh
    await page.waitForNavigation( { waitUntil: 'networkidle2' } )

    await expect( page.title()).resolves.toMatch( 'New title' );

    // Undo the changes
    write( file, content );

});

Check the page's content after a reload on Jest with Puppeteer

1 Answers1