Test HTML Content on a Webpage with Puppeteer

Thanks for the course!

Can I reinitialize component state / reinitialize redux store with some mock data in beforeEach() without starting a new browser instance?

E.g. I would like to simulate a counter + / - by clicking a button.

// Counter starts at 0

element = page.$(`.add`)
element.click() 

// and now it's 1.

I would then like to simulate what happens when counter starts at 0 within the same browser instance without doing something hacky like adding decrement button click at the end of the of 'add' test to take the counter to 0 manually.

If you are experiencing TypeError: environment.setup is not a function, just add to package.json:

  "jest": {
    "testEnvironment": "node"
  }

The page variable also must have await, or it is a Promise in a time when page.emulate is called and it throws an error:

 FAIL  src/App.test.js
  on page load
    ✕ h1 loads correctly (1277ms)

  ● on page load › h1 loads correctly

    TypeError: page.emulate is not a function

It is already in the code on github, but NOT in video and many of us is not checking github code...

When I run the command "npm run debug", the following error comes: Couldn't find preset "react" relative to directory. Why does this error come?

got error, had to run: npm install -g win-node-env

to make it run as Linux envirionment

Expected "Welcome to React", received {}

Changed to: html.then(() => { expect(html).toBe('Welcome to React') }) and the test passed. Can't really explain this, can anyone help?

I also got:

(node:19549) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Protocol error (Runtime.evaluate): Target closed. (node:19549) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Does this mean my node is a bit old?

I'm receiving the same warning about the unhandled promise rejection and having a little trouble getting past it. Running v10.5.0 of node so I doubt that it is the issue.

I'm not 100% on the syntax needed to handle the rejection.

I am having issues with running "npm run debug" script at 4:30.

I'm getting the following - npm run debug -> npm ERR! puppeteer-testing@0.1.0 debug: NODE_ENV=debug npm test npm ERR! Exit status 1

and

jest jest : The term 'jest' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.

Please advise.

If you're on windows...

"debug": "SET NODE_ENV=debug & npm test",

How do I get "debug": "NODE_ENV=debug yarn test" working with Parcel?

When I run yarn debug, I get an error:

'NODE_ENV' is not recognized as an internal or external command, operable program or batch file. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Update

I've figured it out. On Windows, setting of the NODE_ENV is different, and to make it worse, it is different between various terminals within Windows (e.g. Bash vs PowerShell).

Here's how to fix it.

• Install cross-env by doing npm install "cross-env".
• Then in your debug script, have cross-env NODE_ENV=debug yarn test.