How do I write unit tests or e2e tests?

[ralyodio]

The examples don’t show any kind of test code. Like “it”

[patrickhulce]

This library doesn't really interact with any specific test runner, so how you decide to chunk your tests is up to you.

Here's an example with describe/it wrapped around our example.

const puppeteer = require('puppeteer')
const {getDocument, queries, waitFor} = require('pptr-testing-library')

const {getByTestId, getByLabelText} = queries

describe('e2e tests', () => {
  let browser
  let page
  let $document

  beforeAll(async () => {
    browser = await puppeteer.launch()
    page = await browser.newPage()
  })

  it('loads the page', async () => {
    await page.goto('https://example.com')
    // Grab ElementHandle for document
    $document = await getDocument(page)
  })

  it('fills out the form', async () => {
    // Your favorite query methods are available
    const $form = await getByTestId($document, 'my-form')
    // returned elements are ElementHandles too!
    const $email = await getByLabelText($form, 'Email')
    // interact with puppeteer like usual
    await $email.type('[email protected]')
    // waiting works too!
    await waitFor(() => getByText($document, 'Loading...')) 
    const $submit = await getByLabelText(
  })

  it('submitted the data successfully', async () => {
    const $header = await getByTestId($document, 'header')
    expect(await $header.evaluate(el => el.textContent)).toEqual('Success!')
  })
})

[patrickhulce]

PR welcome for anyone that wants to contribute something more substantive :)

[ralyodio]

How do I add the test methods?

[ralyodio]

Is there a page that explains how to set up?

[patrickhulce]

Are you asking how to setup basic jest/mocha tests at all?

[ralyodio]

Yes I’m using jest for unit tests. Wondering how to get it to work with puppeteer too

[ralyodio]

I've got this now. but it won't run. It doesn't find "it()"

const puppeteer = require('puppeteer');
const { getDocument, queries, waitFor } = require('pptr-testing-library');

const { getByTestId, getByLabelText } = queries;

describe('Signup', () => {
	let browser;
	let page;
	let $document;

	beforeAll(async () => {
		browser = await puppeteer.launch();
		page = await browser.newPage();
	});

	it('loads the page', async () => {
		await page.goto('http://localhost:3000');
		// Grab ElementHandle for document
		$document = await getDocument(page);

		expect($docoument).toBeDefined();
	});
});

My package.json looks like this:

"e2e:pptr": "npm run dev & jest ./tests",

I get this error:

  Signup
    ✕ loads the page (5001 ms)

  ● Signup › loads the page

    thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

      14 |      });
      15 |
    > 16 |      it('loads the page', async () => {
         |      ^
      17 |              await page.goto('http://localhost:3000');
      18 |              // Grab ElementHandle for document
      19 |              $document = await getDocument(page);

      at tests/homepage.test.js:16:2
      at Object.<anonymous> (tests/homepage.test.js:6:1)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
      at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        6.421 s

[ralyodio]

Ok so actually it works. lol. but puppetter is not opening an actual browser. Is there a way to enable that?

[ralyodio]

How can I do this:

expect(await $document.evaluate(el => el.title)).toEqual('Catalyze - Log In');

It throws an error.

[patrickhulce]

It throws an error.

What error?