ReactJS Jest Puppeteer tests no longer working: ReferenceError: document is not defined

Question

场景

npm test 过去一直没有问题。在一个月左右的时间里（我忽略了测试）发生了一些变化，现在我在尝试通过 npm test.

运行 Jest-Puppeteer 测试时收到 ReferenceError: document is not defined

即使删除了 document，这个错误也会出现，所以它看起来像是一个人偶问题，但我不确定为什么现在会出现这个问题。我检查了一个多月前的代码，测试仍然有效，但发生了太多变化，很难找出真正的问题。

尝试过的解决方案

升级节点
重新安装 npm 包
恢复jest-puppeteer.config.js到以前的版本
将 @jest-environment jsdom 添加到修复文档问题但随后导致 ReferenceError: page is undefined

问题

如果不从头开始，我该如何解决这个问题？就是说，如果这是需要的，我准备重新开始，有时确实如此。

代码

这是一个基本的笑话文件

import "core-js/stable";
import "regenerator-runtime/runtime";
import {Provider} from "react-redux"
import mockState from "./mocks/mockState"
import configureStore from "redux-mock-store"
import ShallowRenderer from 'react-test-renderer/shallow'
import API from '../src/API'
import getNavigationResponse from '../src/nocks/getNavigation'
import expectedNavigationState from "./static/expectedNavigationState"
import pageObjects from "./static/pageObjects"
import utils from './utils'
import constants from '../src/constants'


describe('API tests', () => {
    beforeEach(async() => {
        await page.goto('http://localhost:3000');
        await page.setViewport({ width: 900, height: 600 });
        await page.goto('http://localhost:3000/');
        await page.evaluate(() => {
            document.getElementById('root').classList.add('animated-test');
        });
        await page.waitForSelector(pageObjects.navFactory);
    });

    // PASS
    test('API data to be in store', async () => {
        await page.waitForSelector(pageObjects.primaryNavLink);

        // get state from root
        const store = await utils.getStore();

        expect(store[0].navigation.urlHashMap).toEqual(expectedNavigationState);
    });

    test.todo('Make sure content==true on vanity urls (home)')

    test.todo('Make sure content==false on url items with children (visitor)')

    // PASS
    test('API cancel should cancel the API request', async () => {
        API.dispatch = () => {

        };
        API.fetch(constants.NAVIGATION_HREF, 'API_FETCH_TYPE_NAVIGATION');
        const promiseCanceled = API.cancel('API_FETCH_TYPE_NAVIGATION');
        expect(promiseCanceled).hasOwnProperty('promise');
        expect(promiseCanceled).hasOwnProperty('cancel');
    });
});

编辑

据我所知，这个“ReferenceError”似乎是一个 babel 错误，因为 babel 似乎无法弄清楚“文档”是什么。我查明了问题发生的位置，它在第三方插件中，所以我同时在开发人员的 github 页面上留下了注释。目前我的“解决方案”是评论这个测试 - 当我有时间找到合适的解决方案时，我会再次投入更多精力

编辑 2

如果我将 <rootDir>/node_modules/react-json-view/dist/main.js 添加到 babel 配置的 transformIgnorePatterns 那么我会得到一个不同的错误

ReferenceError: regeneratorRuntime is not defined

这很奇怪，因为我明确地在顶部设置了 import "regenerator-runtime/runtime"。这似乎更近了一步，但我不确定。我切换回 babel-polyfill（已弃用）只是为了尝试它，但以 TypeError: jest: failed to cache transform results.

的不同错误结束

Answer 1

通常你可以做类似的事情，就是添加：

npm test --env=jsdom

但是由于我还需要 Puppeteer 的环境，因此出现冲突，因为节点似乎只支持一个环境。

最后我删除了这个有问题的插件。

ReactJS Jest Puppeteer tests no longer working: ReferenceError: document is not defined

ReactJS Jest Puppeteer tests no longer working: ReferenceError: document is not defined

reactjs

puppeteer

jest-puppeteer

** 编辑 **

** 编辑 2 **

编辑

编辑 2