如何设置 jest 和 puppeteer 以使用 React 应用程序？

Question

我想使用 jest 和 puppeteer 在 React 应用程序上进行端到端测试。我希望开发服务器作为启动测试的命令的一部分启动。换句话说，我不想单独启动开发服务器然后运行 e2e 测试。我只是 jest-puppeteer 库，因为我读到你可以用这个库来做到这一点。我试图让它工作但失败并出现错误：

Logging in › Splash renders net::ERR_CONNECTION_REFUSED at http://localhost:3000

我的e2e测试文件

describe("Logging in", () => {

  beforeAll(async () => {
    await page.goto("http://localhost:3000");

  });

  it("Splash renders", async () => {
    page.waitForSelector("#test-splash-signuplogin-button")
    const text = await page.$eval("#test-splash-signuplogin-button", (e) => e.textContent);
    expect(text).toBe("Signup or login")
  })
})

jest.config.cjs

module.exports = {
  preset: "jest-puppeteer",
  globals: {
    URL: "http://localhost:3000"
  },
  testRegex: "./*\e2e\.test\.js$",
  verbose: true
};

开玩笑-puppeteer.config.cjs

module.exports = {
  launch: {
    headless: 'false',
    devtools: false
  },
  server: {
    command: "REACT_APP_ENV=local react-scripts start",
    port: 3000,
    launchTimeout: 10000,
    debug: true,
  }
}

Answer 1

我找到了解决方案。首先，我必须确保 jest 的版本是："jest": "26.6.0" in package.json.

然后我不得不将其添加到文件的顶部jest.config.cjs

process.env.JEST_PUPPETEER_CONFIG = require.resolve('./jest-puppeteer.config.cjs');

一旦我添加了这个，删除了 node_modules、re-installed 和运行我的测试套件，它按预期工作。我还发现此 github post 有助于找到此解决方案。

https://github.com/smooth-code/jest-puppeteer/issues/160

如何设置 jest 和 puppeteer 以使用 React 应用程序？

How to setup jest and puppeteer to work with a react app?

reactjs

jest-puppeteer