jest-puppeteer | Headless Chrome Environment Wrapper | Automation library

i use a codebase made with Vue3 Vite, but i cannot find a way to run a simple Jest test importing a component. This works fine in an app create with Vue-cli, but i cannot find a way to make Jest work in a Vue-Vite app with Vue3. Here is the error I encounter

Scenario

npm test used to work without issue. Over the course of a month or so (I neglected tests) something changed and now I receive ReferenceError: document is not defined when trying to run Jest-Puppeteer tests via npm test.

This error shows up even with document removed so it seems like a puppeteer issue but I'm not sure why this is showing up now. I've checked out code from over a month ago and the tests still work but so much has changed that it's difficult to chase down the actually issue.

Attempted Solutions

• upgrade node
• reinstall npm packages
• revert jest-puppeteer.config.js to previous version
• add @jest-environment jsdom to tests which fixes the document issue but then causes ReferenceError: page is undefined

Question

How can I troubleshoot this problem short of starting over from scratch? That said, I'm prepared to start over if that's what it's going to take, which sometimes it does.

Code

this is a basic jest file

Scenario

I'm working on an app that has fast unit/functional jest tests along with slower end-to-end jest-puppeteer tests. I would like to split those up so that I can run the faster tests as part of a git pre-commit hook and leave the end-to-end tests to be run on CI after the code is eventually pushed to origin.

Question

How can I define specific tests to run at pre-commit? Specifically via regex similar to jest moduleNameMapper eg /__tests__/[a-z]+\.unit\.test\.js

• Best idea so far:

in package.json add test:pre which uses bash find . -regex with bash for do to run desired "pre commit" tests

Technology Used:

• npm
• jest
• jest-puppeteer

If I run my tests one by one they individually pass

After looking into the questions:

1. Async setup of environment with Jest
2. window/document not defined in import
3. Configure Jest global tests setup with .ts file (TypeScript)
4. About app.listen() callback
5. How to write a Jest configuration file
6. NodeJS: How to get the server's port?
7. https://alligator.io/nodejs/serving-static-files-in-express/
8. Promisify server.listen
9. Unexpected token import in custom node environment
10. How to access class properties of Jest Test Environment inside child test?
11. Cannot create custom TestEnvironment in Jest
12. globalSetup is executed in different context than tests
13. global beforeAll
14. How to test url change with Jest
15. Specify window.location for each test file for Jest
16. window.location.href can't be changed in tests
17. global beforeAll
18. How do I test a single file using Jest?
19. https://basarat.gitbook.io/typescript/intro-1/jest

I was able to do this:

package.json

Otherwise, when I try to run tests using Puppeteer, I get Error: Chromium revision is not downloaded. Run "npm install" or "yarn install"

It would seem that npm i with Puppeteer in my deps would be enough, but after install completes, I need to cd into /node_modules/puppeteer then run node install.js to get the correct revision downloaded.

When I do initial npm i I see

I'm attempting to create a standalone version of Wordpress' Gutenberg block editor that will work independently of the Wordpress ecosystem. Ideally, I'd like to be able to simply use the Gutenberg editor in an existing React project as a React component.

I noticed the official repository featured a "storybook" directory which housed a React component at "storybook/stories/playground/index.js":

Above, you can see the input element with the #account_email selector. But a jest functional test which awaits selection and typing in this field fails every time. I can't understand why.

Is there a syntax error below? Is this type of selection prone to error? Any advice on fixing this is welcome.

I tried to set up my jest runner to work properly with scss @impport statatement (inside css modules in my React app). but unfortunately, I get an error each time I run a test script. I tried different solutions from the StackOverflow similar tickets, but it didn't help me.

example of my error:

my jest.config.js: