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
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 );
});