Jest: RequireJS 지원

++

Jest에 대한 모듈 시스템 추가 기능(예: require.js, es6 모듈 등)을 지원하는 로드맵에 있지만 불행히도 아직 거기까지는 도달하지 못했습니다.

이 문제에 대한 진행 상황을 추적하기 위해 이 문제를 열어 둡니다. require.js 로더를 지원하는 것이 매우 유용할 것이라고 생각합니다.

@jeffmo 웹팩 은 commonjs/es6/amd를 지원합니다. 농담을 플러그인으로 가져올 수 있다면 아마 그 모든 것을 무료로 얻을 수 있을 것입니다.

++

우리는 큰 조직에 많은 프로젝트가 있고 jest를 사용할 계획이지만 100% requirejs입니다. requirejs 통합에 대한 모든 예상?

++

농담도 해보고 싶지만 현재 진행 중인 프로젝트는 RequireJS를 사용하고 있습니다.

:+1:

누군가 이것을 심으로 사용하자고 제안했는데 아무도 시도하지 않았습니까?

https://github.com/Jakobo/redefine

_주의 사항으로 가능_. 임시방편 으로 트릭을 수행할 수 있는 임의의 저장소 에서 nodefy 로 약간의 빌드를 구현했습니다. 패키지 아래의 scripts.cjs를 참조하십시오.

Litmus 테스트: AMD 모듈 별칭은 node_modules 아래의 해당 모듈과 정렬됩니다 . 리트머스 테스트가 실패했지만 절망적이라면 순수 AMD 모듈을 nodefy하거나 node_modules에 심볼릭 링크를 추가할 수 있지만 그 아이디어는 나를 슬프게 합니다. 내 관점에서, 내가 사용하는 외부 장치는 UMD를 구현하고 내 AMD 별칭과 일치하는 이름에 npm으로 설치하는 경향이 있습니다. 큰 문제는 아닙니다.

(나는 nodefy 전에 uRequire를 체크 아웃했지만 CommonJS 템플릿 은 기능적으로 nodefy와 동일하게 렌더링합니다. 대상 도구를 사용할 것입니다. amdefine도 확인했지만 jest는 'require'에서 정규식 일치를 사용합니다. 아마도 익명의 AMD가 있을 수 있습니다. 항상 UMD가 있지만 document 레퍼런스가 흩어져 있는 UMD를 코딩하는 것은 매너가 좋지 않습니다.)

+1

++

우리는 모든 새로운 클라이언트 측 코드에서 react, backbone 및 requirejs를 사용하고 있습니다. 농담을 사용하고 반응 테스트의 고통을 완화할 수 있기를 바랍니다. 단위 수준으로 물건을 낮추는 것이 좋을 것입니다. 현재 반응 코드에 대한 테스트는 rspec 및 webdriver로 수행되고 있습니다. 이것이 작동하는 동안 명백한 이유로 이상적이지 않습니다.

아직 실용적인 해결 방법이 있습니까? 내가 겪고 있는 주요 문제는 반응 구성 요소를 래핑하는 정의 문입니다.

+1

@petehunt 저를 Webpack으로

+1

누군가 코드 적용으로 브라우저 테스트를 실행하는 jasmine/webpack 또는 jest/webpack의 예를 알려줄 수 있습니까?

++

우리는 언제 requirejs에 대한 지원을 기대할 수 있습니까?

+1

+1

+1

+1

+1

+1

정의 호출에 대해 return 대신 module.exports를 사용하는 경우 이를 전처리기에 추가할 수 있습니다.

나를 위해 작동합니다 :엄지손가락:

// preprocessor.js
var ReactTools = require('react-tools');
module.exports = {
  process: function(src) {
    if (/define\(.*?\{/.test(src)) {
      //Remove AMD ceremony for use without require.js or almond.js
      src = src.replace(/define\(.*?\{/, '')
        .replace(/(}\);|}\))$/,'');
    }

    return ReactTools.transform(src);
  }
};

++

+1

+1

RequireJS 지원 +1

+1

@charliedowler 이 접근 방식을 조금 더

if (typeof(module) == 'object' && module.exports) { module.exports = <my_element>;  }

그러나 return 하고 있으므로 전처리기에서 파서 오류가 발생합니다. 나는 마지막 반환과 일치하도록 RegEx를 확장하여 벗어날 수 있다고 생각했습니다. 그러나 전혀 작동하지 않는 것 같습니다. "불법 반품 명세서" 오류가 계속 발생합니다. 아마도 표현에 문제가 있는 것 같습니다.

if (/define\(.*?\{/.test(src)) {
  src = src.replace(/(define\(.*?\{|return.*[\s]}\);?$)/g,'');  
}

src 를 stdout에 쓰는 방법이 있습니까? 간단한 console.log가 작동하지 않습니다.

그리고 마지막으로, 이 모든 것이 작동한다고 가정합니다. 종속성을 어떻게 처리하고 있습니까? 예를 들어 React?

+1

아! 나는 (그리고 매우 즐겁게 농담을) 가지고 놀고 있었다. 오늘 실제 프로젝트로 가져오려고 시도했지만 현재 모든 "실제" 프로젝트에 대한 requireJS 지원 :sob: ... 거래 차단기가 없음을 발견했습니다. 참으로 슬프다. 확실히 흥미로운 아이디어였습니다!

:+1:

+1

+1

:+1:

:엄지손가락:

:+1:

:+1:

그래서 웹팩을 사용하여 AMD 모듈과 테스트를 함께 컴파일하여 이 문제를 해결했습니다. 이를 통해 모든 종류의 추가 로더를 테스트에 사용할 수 있었습니다. https://github.com/ninjapanzer/Backbone-Flux-React-Webpack

:+1:

+1

+1

+1

이 문제를 신고해 주셔서 감사하고 양해해 주셔서 감사합니다. 이 문제에 대한 업데이트를 핵심 팀에 알렸습니다. 앞으로 30일 이내에 답변을 기다리고 있으며 그렇지 않으면 문제가 종료될 수 있습니다.

+1

@facebook-github-bot-4 해주세요!

+1

+1

++

Webpack을 지원하기 위해 Jest의 'HasteModuleLoader'를 대체하는 Jestpack에 대해 작업해 왔습니다. 결과적으로 AMD를 포함하여 Webpack이 지원하는 모든 모듈 시스템을 사용할 수 있습니다.

참고로 Jestpack의 성능을 테스트하는 데 정말 유용한 FB 스타일의 서둘러 모듈을 사용하는 프로젝트 외에 Jest를 사용하는 대규모(ish) 오픈 소스 프로젝트에 대해 아는 사람이 있습니까?

또한 jest-requirejs 프로젝트 main.js 구성 파일을 분석한 다음 deamdify 을 제거하는 define 래퍼는 main.js의 지정된 baseUrl 및 경로의 세부 정보를 기반으로 필수 경로를 다시 작성한 다음 변환된 파일을 평소와 같이 jest에 전달합니다.

여전히 플러그인/로더 구문에 대해 작업 중이며 테스트 환경 내에서 jest.dontMock("") , jest.setMock("") 및 require.requireActual("") 경로를 다시 작성합니다.

얘들아 이거 진짜 대박이다. 저는 Jestpack의 아이디어가 마음에 들고 추가 모듈 해석기를 훨씬 쉽게 지원하도록 만들었습니다. 마지막으로 웹사이트를 개편하고 시작하기 가이드의 일부로 Jestpack과 같은 솔루션을 추천하고 싶습니다. @richardscarrott 및 @sterpe 필요한 것이 있으면 알려주십시오.

또한 cc @mwolson 및 @ColCh

(다른 모든 사람들에게: 댓글에 찬성 투표를 중지하세요. 도움이 되지 않습니다. 농담을 위해 빌드된 것을 원하면 끌어오기 요청을 보내십시오. 코드가 논쟁을 이깁니다! 개인적으로 커뮤니티의 사람들이 기능을 필요로 하기 때문에 기능의 우선 순위를 지정할 수 없습니다. 거기에 있는 _모든 모듈 로더_를 사용하지 마십시오.).

Jestpack은 흥미롭지만 테스트당 하나의 진입점을 생성해야 하는 팬은 아닙니다. https://github.com/Ticketmaster/jest-webpack-alias 는 웹팩의 모듈 확인 코드를 다시 구현하여 일부 전처리 및 아직 발견되지 않은 버그를 희생하여 문제를 좀 더 일반적으로 해결합니다.

또한 시작하기 가이드에서는 전처리기가 실행되는 파일을 제한하는 것이 좋습니다(있는 경우). 그렇지 않으면 테스트 실행 속도가 상당히 느려집니다.

전처리기는 한 번만 실행되며 캐시 키 기능을 제공할 수 있습니다. jest는 파일이 변경되지 않은 경우 전처리기를 다시 실행하지 않습니다.

그럴 수도 있지만 첫 번째 실행만으로도 테스트 스위트 실행에 약 10초를 추가하기에 충분했습니다.

빠르지 않다는 데 동의했습니다. FB에서 첫 번째 실행은 후속 실행보다 거의 두 배나 오래 걸리지만 개인적으로 이 문제를 해결할 다른 방법이 없습니다. FB에서 babel 및 기타 사용자 지정 변환을 사용하고 있습니다. 전처리기 없이 테스트를 실행할 수 없습니다 :)

전처리기 캐싱은 requirejs 전처리기를 개발하는 동안 저를 물고 있었습니다. 나는 대부분 여전히 캐싱이 없는 [email protected] 를 사용합니다.

0.5에서 잘 작동해야합니다!

Webpack은 dev-watch 모드에서 매우 빠릅니다.

왜냐하면:

1. Webpack은 런타임을 메모리에 유지합니다(다시 로드하지 않음).
2. 컴파일된 소스 코드도 메모리에 있습니다.

그래서 제 Jest 전처리기에서는 (2) 포인트만 구현했습니다.

간단히 말해서 Jest 및 Webpack 위에 있는 패키지( 메모리 FS 에서 컴파일하고, 메모리 FS 에서 테스트 케이스를 실행하기만 하면 됩니다.

그게 제 관점입니다...

그러나 지금 또 다른 문제가 있습니다. 현재로서는 메모리 FS 를 Jest 에 주입할 수 없습니다.

컴파일된 소스를 캐시에 바로 주입하기 위해 개인 Jest 캐시 API를 사용하는 것에 대해 생각했습니다. 해킹 일 수 있으므로 여기에서 틀렸습니다. jest-webpack/issues/4#issuecomment-98623189

아, Webpack 을 전처리 Karma 도 매우 느리게 작동합니다. 따라서 주요 성능 저하가 파일 간의 webpack 런타임 재로드 때문이라고 생각합니다.

@cpojer 나는 그것이 이미 선택되어 있었기 때문에 결국 모듈 로더를 구성 가능하게 만드는 것이 당신의 의도라고 생각했기 때문에 Jestpack으로 그것을 찔러 줄 것이라고 생각했습니다. 내가 만난 유일한 진짜 문제는 node_modules https://github.com/facebook/jest/issues/509 에 대한 수동 모의를 발견하기 위한 논리를 이해하는 것이었습니다. 나는 결국 나에게 의미가 있는 솔루션을 사용하게 되었지만 만약 당신이 Jestpack의 모듈 로더를 HasteModuleLoader와 정렬하는 것이 좋을 것입니다.

@mwolson Jestpack 이 테스트 파일마다 별도의 진입점을 사용하는 이유는 Jest의 다중 프로세스를 계속 활용할 수 있도록 하기 위해서입니다.

실제로 moduleLoader 는 이미 구성의 일부로 지정할 수 있습니다.

++

우리도 이것을 원합니다. Jest는 훌륭한 소프트웨어처럼 보이지만 RequireJS 지원이 없기 때문에 모든 것을 다시 작성할 수는 없습니다.

+1

커뮤니티에서 이 작업에 관심이 있는 사람이 있습니까? 나는 이것을 통해 사람들을 지원하고 공식 Jest 플러그인을 만들게 되어 기쁩니다. 조만간 FB에서 이에 막대한 투자를 할 것 같지는 않습니다. Jest 팀은 매우 작으며(1.5명) 불행히도 이러한 모든 기능에 대해 작업할 수 없습니다.

JavaScript 커뮤니티 및 표준의 현재 상태를 기반으로 하면 require js 자체가 JavaScript 코드 작성에 큰 미래가 있는 것처럼 보이지 않습니다. 이제 ES2015에 표준화된 모듈 시스템이 있습니다. Babel과 Jest는 이제 완전히 통합되었으며 함께 잘 작동합니다. 나는 누구에게나 CommonJS 또는 ES2015 모듈로 전환할 것을 권장할 것입니다. 그러면 즉시 사용할 수 있는 더 많은 도구가 제공됩니다.

require JS에는 CommonJS를 프로덕션 배포에 사용할 수 있는 require.js로 변환하는 방법에 대한 문서도 있습니다. http://requirejs.org/docs/commonjs.html 참조

개인적으로 require JS를 사용하여 코드를 작성하는 데에는 아무런 이점이 없습니다. 또한 require JS 코드베이스를 CommonJS로 변환하는 데 도움이 될 수 있는 codemod 를 작성하는 데 도움을 드리고 싶습니다. 또 다른 문제는 requireJS를 CommonJS babel 플러그인에 작성하고 Jest의 전처리기로 가져오는 것입니다.

@cpojer 여기 https://github.com/sterpe/jest-requirejs/blob/master/index.js 에서 전처리기 접근 방식으로 다소 성공했지만 지금까지는 !text/ 플러그인에 대한 변환만 구현했습니다. 우리 팀은 requirejs에서 완전히 벗어났기 때문에 그 길을 계속 갈 이유가 없었습니다.

동의합니다. 코드를 작성하기 위해 RequireJS를 사용하는 것이 거의 가치가 없다고 생각합니다. CommonJS/ES2015 모듈 코드를 프로덕션용 requirejs로 컴파일하는 것이 이해가 되지만 이 스타일로 코드를 수동으로 작성하는 것은 좋지 않은 것 같습니다.

방금 RequireJS에서 webpack으로 마이그레이션했습니다. 코드베이스에는 300개 이상의 구성 요소가 있습니다. 전체 과정은 놀라울 정도로 쉽고 고통스럽지 않았습니다.

내가 사용한 도구는 AMD에서 CommonJS 스타일로 코드를 변환하기 위해 https://github.com/Skookum/recast-to-cjs 였습니다.

또한 https://github.com/facebook/jscodeshift 의 도움으로 며칠 내에 코드 기반을 React 0.11에서 0.14로 마이그레이션했습니다.

이것이 같은 상황에 있는 누군가를 도울 수 있기를 바랍니다.

@텐던트 굿 ! 그것이 바로 제가 전에 말했던 것입니다. :) 그것이 당신을 위해 잘 작동했기 때문에 기쁩니다.

내 해결 방법은 다음과 같습니다.
https://github.com/1twitif/testRequireJSAmdModulesWithJest
적어도 이 사용 사례에서는 작동합니다.
http://stackoverflow.com/questions/33889662/not-able-to-load-amd-modules-through-jest

이것이 닫혀 있기 때문에 Facebook이 이에 대한 지원을 추가하지 않을 것임을 의미합니까?

Facebook이 저를 의미한다면 예, "공식적인" 지원이 없을 것입니다. 그렇다고 해서 Jest에 기여하고 이 기능을 사용하는 것을 막을 수는 없지만 요즘 대부분의 사람들이 ES 모듈이나 CommonJS로 이동했다고 생각합니다.

네, 알아요. 불행히도 나는 업무용이기 때문에 이러한 종속성에서 벗어날 수 없습니다.

babel-plugin-transform-amd-to-commonjs 는 특히 babel-jest와 같은 것을 이미 사용하고 있는 경우 Jest+AMD 문제를 해결하는 데 유용할 수 있습니다.

테스트 환경에서 변환을 실행하여 Jest가 AMD 파일을 투명하게 요구하도록 하는 방법을 보여주는 예제 프로젝트 를 설정했습니다.

실제 프로젝트에서 이러한 접근 방식의 세부 사항이 확실하지 않습니다. 특히 Jest/RequireJS/Webpack/etc 간의 구성 공유에 대한 좋은 접근 방식입니다. .js 구성 파일에 대한 Jest 지원은 보다 재사용 가능한 솔루션을 향한 단계가 될 것입니다(https://github.com/facebook/jest/issues/2140 참조).

@msrose 굉장합니다. 공유해 주셔서 감사합니다.

나는 이것이 오래된 문제라는 것을 이해합니다. 간단한 변환이 작동할 수 있습니다.

exports.process = function (content) {
  return 'function define(name, deps, body) { module.exports = body.apply(undefined, deps.map(require)); }' + content;
}

AMD -> CJS의 변환은 예를 들어 deamdify , 래퍼 삽입 등 여러 가지 방법으로 수행할 수 있다고 생각합니다. 여전히 해결되지 않은 문제는 Require 스타일 로더/플러그인 구문입니다. fooTemplate = require('tpl!foo.tpl') 및 barJson = require('json!bar.json') (상대적으로 일반적인 것)와 같은 항목입니다. 그러나 이것들이 상당히 많았고 실제 require-js 프로젝트에는 이런 종류의 구문이 흩어져 있습니다.

궁극적으로 jest 의 모듈 로더에 공급되는 변환 시스템에서 기존 require-js 플러그인을 직접 재사용하는 쉬운 방법이 있다면 좋을 것입니다.

+1

ReferenceError: define is not defined

+1

srcApp.test.js 실패
● 테스트 스위트 실행 실패

ReferenceError: define is not defined

amd 대신 umd를 사용해야 합니다. 이것이 가능하지 않다면 변환을 추가해야 합니다(예: 위에 링크된 babel 플러그인).

loader! 구문에 관해서는 이를 지원하지 않습니다(Webpack에서도 지원하지 않습니다). 해결 방법은 가져오기를 변환하고(로더 제거) Jest가 transform 구성을 사용하여 변환하도록 하는 것입니다. 관련 토론: #4868