>웹 프론트엔드 >JS 튜토리얼 >Jest로 ES6 모듈 가져오기 모의를 처리하는 방법은 무엇입니까?

Jest로 ES6 모듈 가져오기 모의를 처리하는 방법은 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-10-23 22:34:02424검색

How to Handle ES6 Module Imports Mocking with Jest?

Jest를 사용하여 ES6 모듈 가져오기 모의

ES6 모듈을 테스트하는 세계에서 종속성을 모의하는 것은 때때로 문제가 될 수 있습니다. 이 기사에서는 Jest를 사용하여 ES6 모듈 가져오기를 모의하는 방법을 조사하고 명명된 내보내기와 기본 내보내기 모두에 작동하는 솔루션을 제공합니다.

문제

다른 모듈에 의존하는 다음과 같은 가상의 ES6 모듈을 고려해보세요. 기능:

<code class="js">// myModule.js
import dependency from './dependency';

export default (x) => {
  dependency.doSomething(x * 2);
};</code>

이상적인 테스트 시나리오에서는 종속성 모듈을 모의하고 doSomething 함수가 예상 인수로 호출되고 있다고 주장하고 싶습니다. 그러나 Jest에서는 이 작업이 까다로울 수 있습니다.

'Yuck' 접근 방식

일반적인 접근 방식은 다음과 같이 import를 require로 대체하고 테스트 내에서 이동하는 것입니다.

<code class="js">// Dependency Code
export const doSomething = (y) => console.log(y);

// Module Code (Modified)
export default (x) => {
  const dependency = require('./dependency'); // Yuck
  dependency.doSomething(x * 2);
};

// Test Code (Modified)
import myModule from '../myModule';
import dependency from '../dependency';

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    jest.mock('../dependency');

    myModule(2);

    const dependency = require('../dependency'); // Also yuck
    expect(dependency.doSomething).toBeCalledWith(4);
  });
});</code>

이 접근 방식은 즉각적인 요구 사항을 충족하지만, 코드베이스에 불필요한 수정이 발생하고 전반적인 코드 품질이 저하됩니다.

'해킹' 접근 방식

보다 우아한 솔루션은 다음을 사용하는 것입니다. import * 구문. 이 기술을 사용하면 이름이 지정된 내보내기 또는 기본 내보내기를 직접 변경할 수 있으므로 모의 작업이 수월해집니다.

이름이 지정된 내보내기의 경우:

<code class="js">// Test Code
import myModule from '../myModule';
import * as dependency from '../dependency';

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    dependency.doSomething = jest.fn(); // Mutate the named export

    myModule(2);

    expect(dependency.doSomething).toBeCalledWith(4);
  });
});</code>

기본 내보내기의 경우:

<code class="js">// Test Code
import myModule from '../myModule';
import * as dependency from '../dependency';

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    dependency.default = jest.fn(); // Mutate the default export

    myModule(2);

    expect(dependency.default).toBeCalledWith(4); // Assert against the default
  });
});
</code>

주의

이러한 방식으로 가져온 모듈을 변경하면 테스트에서 부작용과 예측할 수 없는 동작이 발생할 수 있다는 점에 유의하는 것이 중요합니다. 따라서 이 접근 방식은 빠른 수정을 제공할 수 있지만 장기적인 방법으로는 권장되지 않습니다. Jest는 모듈을 조롱하고 감시하기 위한 보다 일반적인 방법을 제공하며, 이는 대신 고려해야 합니다.

위 내용은 Jest로 ES6 모듈 가져오기 모의를 처리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.