Jest SecurityError: localStorage ไม่สามารถใช้ได้กับต้นกำเนิดทึบแสง

144

เมื่อฉันต้องการเรียกใช้โครงการด้วยคำสั่งnpm run testฉันได้รับข้อผิดพลาดด้านล่าง อะไรทำให้เกิดสิ่งนี้

FAIL
● Test suite failed to run

SecurityError: localStorage is not available for opaque origins at Window.get localStorage [as localStorage] (node_modules/jsdom/lib/jsdom/browser/Window.js:257:15)
      at Array.forEach (<anonymous>)

— amirdehghan
แหล่งที่มา

คุณเข้าถึงแอปพลิเคชันของคุณได้อย่างไร .. ฉันหมายถึงคุณเข้าถึงได้http://localhost:port...ไหม

— David R

นี่เป็นปัญหากับนักวิ่งทดสอบ @DavidR เขามีปัญหากับ >>> การทดสอบการเดินเครื่อง npm <<<

— Martin Chaov

@ MartinChaov Yup ฉันรู้ว่า ผมอยากเห็นคำตอบของเขาเพื่อตรวจสอบสิ่งผิดปกติในของเขาถ้าjestการตั้งค่า :-)

— เดวิด R

1

ฉันเพิ่งเริ่มใช้งานตัวเองนี้ ... ฉันไม่ได้ใช้ที่เก็บข้อมูลในตัวเครื่องเลย รหัสของคุณใช้ ts-jest หรือไม่?

— k2snowman69

@ k2snowman69 โปรดตรวจสอบคำตอบของฉันและโพสต์ความคิดเห็นของคุณ

— David R

139

ในกรณีที่คุณกำลังใช้งานแอปพลิเคชันของคุณด้วยhttp://localhostคำนำหน้าคุณจะต้องอัปเดตการกำหนดค่าล้อเลียนของคุณ (ในjest.config.js) เป็น:

  "jest": {
    "verbose": true,
    "testURL": "http://localhost/"
  }

ในกรณีที่คุณยังไม่ได้กำหนดค่าใด ๆ package.jsonล้อเล่นเพียงรวมถึงการกำหนดค่าของคุณ ตัวอย่างเช่น:

{
  "name": "...",
  "description": "...",
  ...
  "jest": {
    "verbose": true,
    "testURL": "http://localhost/"
  }
}

หรือในjest.config.js:

module.exports = {
  verbose: true,
  testURL: "http://localhost/",
  ...
}

หรือถ้าคุณได้projectsกำหนดค่า:

module.exports = {
  verbose: true,

  projects: [{
    runner: 'jest-runner',
    testURL: "http://localhost/",

    // ...
  }]
}

— เดวิดอาร์
แหล่งที่มา

17

ใช่นี่ใช้งานได้สำหรับฉัน ... แม้ว่าฉันจะไม่เข้าใจว่าทำไมฉันถึงต้องการสิ่งนี้หรือทำไมมันถึงทำงานก่อนการอัปเกรดล่าสุด

— k2snowman69

1

เรื่องนี้มีการกล่าวถึงในjestหน้า

— Github

2

นอกจากนี้คุณยังสามารถใช้ตัวเลือก CLI ในสคริปต์ NPM jest --testURL=\"http://localhost\"ของคุณ: มีประโยชน์หากคุณไม่สามารถตั้งค่าการกำหนดค่าส่วนรวมทั่วโลกเนื่องจากสภาพแวดล้อมอื่น (สคริปต์การตอบสนองสำหรับฉัน)

— Burrich

ฉันทำงานเกี่ยวกับการตอบสนองพื้นเมือง แม้กระทั่งสำหรับฉันtestUrlทำงาน

— Jimit Patel

78

ฉันเพิ่งจะปลูกพืชนี้ใน monorepo ขนาดใหญ่ (ในการทดสอบหน่วยที่ไม่จำเป็นต้อง jsdom) การตั้งค่าต่อไปนี้อย่างชัดเจนในjest.config.js(หรือpackage.jsonเทียบเท่า) ของเรายังช่วยบรรเทาปัญหานั้น:

module.exports = {
  testEnvironment: 'node'
}

อัปเดต: ตามที่ Nicolas กล่าวไว้ด้านล่าง (ขอบคุณ!) คุณสามารถเพิ่มการตั้งค่าสถานะต่อไปนี้หากคุณไม่ได้ใช้ไฟล์ปรับแต่งใด ๆ :

jest --testEnvironment node    
# or 
jest --env=node

— Burgi
แหล่งที่มา

3

สิ่งนี้ได้ผลสำหรับฉัน! นี่คือคำตอบที่คุณต้องการ! ขอบคุณ!

— blueprintchris

ดูเหมือนว่าผู้เขียนมีสภาพแวดล้อมโหนด `- ในกรณีของเขาเขาควรตั้ง testEnvironment:" jsdom " สิ่งนี้ใช้ได้กับฉันด้วยการอัปเดตล่าสุด ขอบคุณสำหรับคำแนะนำ!

— Philipp Möhler

3

ตามที่ระบุไว้ในคำตอบอื่น ๆ บางส่วนด้านล่างคุณสามารถข้ามรุ่นของไฟล์ config (หรือคุณสมบัติ package.json) โดยการเรียกใช้jest --testEnvironment nodeหรือจดชวเลขของมันjest --env=node, Intead

— Nicolás Fantone

2

นี่ควรเป็นคำตอบที่ยอมรับได้ ดูเหมือนว่าเหมาะสมกว่าสำหรับข้อผิดพลาด testURLนอกจากนี้ถ้าคุณเป็นเพียงการทดสอบสคริปต์มันทำให้รู้สึกไม่ที่จะกำหนด

— Dez

16

คุณต้องระบุว่า--envคุณกำลังใช้สภาพแวดล้อมใด ( )

เมื่อคุณเรียกใช้jestคำสั่งในที่package.jsonคุณควรระบุสภาพแวดล้อม ( jsdomหรือnode) ตัวอย่างเช่น:

  "scripts": {
    "jest": "jest --env=node --colors --coverage test",
    "test": "npm run jest"
  },

สิ่งนี้น่าจะเหมาะกับคุณ!

— Manuel Morejón
แหล่งที่มา

1

หากคุณใช้ jsdom สิ่งเดียวกันจะเกิดขึ้นไม่ว่าคุณจะระบุenvผ่านการตั้งค่าหรือ commandline หรือไม่ก็ตาม สิ่งนี้เริ่มเกิดขึ้นกับการอัพเดทล่าสุดของตลกที่สุดในวันนี้ โปรดดูคำตอบของ @David R สำหรับวิธีการแก้ปัญหาหากเป็นกรณีนี้สำหรับคุณ

— fisch2

7

หากคุณใช้ jsdom ตรวจสอบให้แน่ใจว่าคุณใส่ URL

ชำระเงินตัวเลือกง่ายๆที่เก็บ jsdom https://github.com/jsdom/jsdom#simple-options

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const dom = new JSDOM(`...`, { url: "https://example.org/" });

— p8ul
แหล่งที่มา

ในกรณีของฉันฉันฉันเพิ่มรหัสนั้นในไฟล์คอนฟิกูเรชัน jsdom ของฉัน

var jsdom = require('jsdom'); var exposedProperties = ['window', 'navigator', 'document'];  const { JSDOM } = jsdom;  const {document }  = (new JSDOM('',{ url: "https://localhost/",})).window;  global.document = document;

— p8ul

+1 ในขณะที่ไม่เฉพาะเจาะจงเกี่ยวกับ Jest นี่เป็นโซลูชันทางเลือกและสามารถใช้สำหรับการตั้งค่าอื่น ๆ (เนื่องจากนี่คือ SO ด้านบนสำหรับรหัสข้อผิดพลาดอื่น ๆ เช่นฉันจะพบหน้านี้ที่ไม่ได้ใช้ Jest) ต่อ @ dspacejs คำถามที่ดีนี้จะเป็นไฟล์แยกที่เรียกว่าผ่านคำสั่งทดสอบของคุณpackage.jsonมา ตัวอย่างเช่นรหัสนี้จะถูกบันทึกไว้ในไฟล์และเรียกใช้มอคค่า:testHelper.ts

scripts: { test-setup: 'mocha --compilers ts:ts-node/register,tsx:ts-nocde/register --require testHelper.ts --reporter progress' }

— jmbertucci

4

คำแนะนำในคำตอบติดอันดับสูงสุดของการเพิ่มtestURL: "http://localhost"ลงใน Jest config ของฉันไม่ได้สำหรับฉัน อย่างไรก็ตามคำแนะนำนี้จากการสนทนา jsdom GitHubผ่านการส่ง URL เมื่อสร้างวัตถุ jsdom

const url = 'http://localhost';

const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', { url });

— Scott Martin
แหล่งที่มา

1

สำหรับฉันนี้ได้รับการแก้ไขโดยการอัพเกรดเป็น "ตลก": "^ 24.9.0",

— Mike Rodov
แหล่งที่มา

0

นี่อาจฟังดูไร้สาระ แต่สำหรับฉันปัญหาเกิดขึ้นเพราะฉันติดตั้งแพคเกจแบบสุ่มด้วยความผิดพลาด npm updateแต่สำหรับผมแล้วปัญหาที่เกิดเพราะผมได้ติดตั้งผิดพลาดแพคเกจสุ่มที่มี ผมทำงานnpm installแล้วแต่ฉันควรจะมีเพียงวิ่งnpm update npm installฉันแก้ไขปัญหาด้วยการลบnode_modulesไดเรกทอรีและเรียกใช้npm installอีกครั้ง

— ร็อคลี
แหล่งที่มา

สิ่งนี้เกี่ยวข้องกับฉันจริง ๆ แล้วฉันไม่สามารถดำเนินการให้เสร็จสิ้นnpm installได้เนื่องจากองค์กรพร็อกซี ดังนั้นรูปแบบจะยังไม่เสร็จสมบูรณ์npm installation

— ซี Khullah

0

คุณไม่จำเป็นต้องทำอะไรขณะทำงานกับ React JS เป็นพฤติกรรมเริ่มต้นของ create-react-app เพื่อวาง JEST และตั้งค่าสภาพแวดล้อมการทดสอบ เมื่อเริ่มทำงานด้านล่างจะเริ่มแสดงว่าการทดสอบสำเร็จหรือล้มเหลว

ทดสอบ npm

ในกรณีที่คุณต้องการความคุ้มครองการทดสอบคุณเพียงแค่เพิ่มด้านล่างลงในไฟล์ package.json

"ทดสอบ": "ทดสอบปฏิกิริยาสคริปต์ - หน้าจอ" ตอนนี้ "สคริปต์" ของคุณจาก package.json ดูเหมือนว่า

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --coverage",
"eject": "react-scripts eject"

}

— Amjad Khan
แหล่งที่มา

0

นี้โผล่ขึ้นมากับฉันเมื่อการบูรณาการกับenzyme jestการอภิปรายปัญหา Githubแนะนำเช่นเดียวกับที่ระบุไว้ข้างต้นคือการเพิ่ม

"testURL": "http://localhost/"

เพื่อกำหนดค่าล้อเล่น อย่างไรก็ตามมันเป็นเรื่องดีที่จะรู้ว่าสิ่งนี้ถูกกระตุ้นโดยเอนไซม์ สำหรับฉันมันคือ React v15 และ v15 adapter

— pascalwhoop
แหล่งที่มา

0

ฉันมีปัญหาเดียวกันและการวางลงในpackage.jsonไฟล์ของฉันทำงานได้สำหรับฉัน:

"jest": {
    "verbose": true,
    "testURL": "http://localhost/"
}

— ซาฮิดอาลี
แหล่งที่มา

0

เพื่อแก้ไขJest SecurityError: localStorageข้อผิดพลาดคุณต้องเพิ่มชิ้นjest: { ... }ส่วนลงในไฟล์package.jsonของคุณ

{

"name": "...",
"version": "..",
"main": "..",
"description": "...",
...

"jest": { "verbose": true, "testURL": "http://localhost/" },

}

— Eugène Beliaev
แหล่งที่มา