代码之家 › 专栏 › 技术社区 › Albert Olivé Corbella

Jest测试文件中的模拟文档

jestjs recaptcha reactjs javascript

Albert Olivé Corbella · 技术社区 · 9 年前

我在react组件中使用此方法来加载 Google Recaptcha API 当组件安装时。

loadCaptcha = () => {
  ((d, s, id) => {
    const element = d.getElementsByTagName(s)[0];
    const fjs = element;
    let js = element;
    if (d.getElementById(id)) {
      return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = '//google.com/recaptcha/api.js';
    fjs.parentNode.insertBefore(js, fjs);
  })(document, 'script', 'google-recaptcha');
};

我很难模仿 document 在Jest测试文件中,因为 d 只有 Document { location: [Getter/Setter] } 因此,其他对象是 undefined .

我尝试添加 setupFiles 简而言之,配置为 other people said in another question :

"setupFiles": ["<rootDir>/__mocks__/documentMock.js"]

Object.defineProperty(document, 'currentScript', {
  value: document.createElement('script'),
});

但是没有运气。有人修好了吗?

也尝试过:

beforeAll(() => {
  global.document: { //code }
})

TypeError: Cannot read property 'parentNode' of undefined

谢谢

2 回复 | 直到 9 年前

jmarceli 7 年前

有 no need to manually mock JSDOM in Jest testEnvironment 在…内 jest.config.js 文件是:

testEnvironment: "jest-environment-jsdom",

如果您想使用一些未在JSDOM中实现的DOM特性,只需模仿以下内容 official docs ,例如。

window.matchMedia = jest.fn().mockImplementation(query => {
  return {
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(),
    removeListener: jest.fn(),
  };
});

Patrick Lee Scott 8 年前

将setupFiles与jsdom一起使用:

__模拟/客户端。js公司

import { JSDOM } from "jsdom"
const dom = new JSDOM()
global.document = dom.window.document
global.window = dom.window

然后在jest配置中:

"setupFiles": [
  "./__mocks__/client.js"
],

推荐文章

NoahVerner · 是否可以在Cypress上进行半自动测试,包括手动解决recaptcha?

4 年前

joe · 看不见的recaptcha api js阻止了我

4 年前

Ahmet · recaptcha在Vue组件中不起作用。给grecaptcha。未加载grecaptcha时,render不是函数

8 年前

CodeBy · 如何在ReactNative应用程序中使用reCaptcha?

8 年前

Dean · SweetAlert模式窗口中的Google reCaptcha

8 年前

Freddy Heppell · PHP Curl错误60查询reCAPTCHA API

8 年前

bmalets TerryS · Recaptcha gem error“未指定站点密钥”

8 年前

ruchit · 如何在angular 2应用程序中添加reCAPTCHA?

8 年前

OtagoHarbour · reCAPTCHA:“站点所有者错误:站点密钥无效”

8 年前

Anonymous · angular 4中RecaptchamModule中的过期回调

8 年前