programing

전 세계적으로 노출된 타사 모듈 확장

oldcodes 2023. 7. 3. 23:10
반응형

전 세계적으로 노출된 타사 모듈 확장

Jest in Typescript에 사용자 지정 일치자를 추가하려고 합니다.이것은 잘 작동하지만 Typescript가 확장된 파일을 인식하도록 할 수 없습니다.Matchers.

내 짝꿍들

export default function myMatcher (this: jest.MatcherUtils, received: any, expected: any): { pass: boolean; message (): string; } {
  const pass = received === expected;
  return {
    pass: pass,
    message: () => `expected ${pass ? '!' : '='}==`,
  }
}

나의 Matcher.d.ts.

declare namespace jest {
  interface Matchers {
    myMatcher (expected: any): boolean;
  }
}

몇 가지 시험

import myMatcher from './myMatcher';

expect.extend({
  myMatcher,
})

it('should work', () => {
  expect('str').myMatcher('str');
})

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "moduleResolution": "node",
    "module": "es6",
    "target": "es5",
    "lib": [
      "es7",
      "dom"
    ]
  },
  "types": [
    "jest"
  ],
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "doc",
    "**/__mocks__/*",
    "**/__tests__/*"
  ]
}

일부 Tests.ts에서 다음 오류가 발생합니다.

error TS2339: Property 'myMatcher' does not exist on type 'Matchers'

Microsoft 설명서를 여러 번 읽었지만 전역적으로 사용 가능한 유형(내보내지 않음)과 네임스페이스 병합을 수행하는 방법을 알 수 없습니다.

joke에서 index.d.ts에 넣는 것은 잘 작동하지만 빠르게 변화하는 코드베이스와 여러 파티에 의해 확장되는 클래스에는 좋은 솔루션이 아닙니다.

좋아요, 여기 몇 가지 문제가 있습니다.

원본 파일일 때(.ts또는.tsx) 파일 및 선언 파일(.d.ts) 파일은 둘 다 모듈을 해결할 수 있는 후보입니다. 여기의 경우와 마찬가지로 컴파일러는 소스 파일을 해결합니다.

값을 내보내고 글로벌 개체의 유형을 수정하려는 경우 두 개의 파일이 있을 수 있습니다.jest그러나 TypeScript에는 모듈 내에서 글로벌 범위를 확대하기 위한 특정 구성이 있으므로 이를 위해 두 개의 파일이 필요하지 않습니다.즉, 필요한 것은 다음과 같습니다..ts파일

내 짝꿍들

// use declare global within a module to introduce or augment a global declaration.
declare global {
  namespace jest {
    interface Matchers {
      myMatcher: typeof myMatcher;
    }
  }
}
export default function myMatcher<T>(this: jest.MatcherUtils, received: T, expected: T) {
  const pass = received === expected;
  return {
    pass,
    message: () => `expected ${pass ? '!' : '='}==`
  };
}

즉, 이러한 상황이 발생한 경우 글로벌 돌연변이 및 글로벌 유형 확대를 동일한 파일에서 수행하는 것이 좋습니다.그런 점을 감안하여 다음과 같이 다시 작성하는 것을 고려하겠습니다.

내 짝꿍들

// ensure this is parsed as a module.
export {};

declare global {
  namespace jest {
    interface Matchers {
      myMatcher: typeof myMatcher;
    }
  }
}
function myMatcher<T>(this: jest.MatcherUtils, received: T, expected: T) {
  const pass = received === expected;
  return {
    pass,
    message: () => `expected ${pass ? '!' : '='}==`
  };
}

expect.extend({
  myMatcher
});

몇 가지 시험

import './myMatcher';

it('should work', () => {
  expect('str').myMatcher('str');
});

간단한 방법은 다음과 같습니다.

사용자 지정Matchers.ts

declare global {
    namespace jest {
        interface Matchers<R> {
            // add any of your custom matchers here
            toBeDivisibleBy: (argument: number) => {};
        }
    }
}

// this will extend the expect with a custom matcher
expect.extend({
    toBeDivisibleBy(received: number, argument: number) {
        const pass = received % argument === 0;
        if (pass) {
            return {
                message: () => `expected ${received} not to be divisible by ${argument}`,
                pass: true
            };
        } else {
            return {
                message: () => `expected ${received} to be divisible by ${argument}`,
                pass: false
            };
        }
    }
});

my.spec.ts

import "path/to/customMatchers";

test('even and odd numbers', () => {
   expect(100).toBeDivisibleBy(2);
   expect(101).not.toBeDivisibleBy(2);
});

@Aluan Haddad의 대답은 거의 정확합니다. 몇 가지 유형이 있습니다.이 기능은 다음과 같습니다.

export {};

declare global {
  namespace jest {
    interface Matchers<R> {
      myMatcher: (received: string) => R;
    }
  }
}

function myMatcher<T>(this: jest.MatcherUtils, received: string, expected: string): jest.CustomMatcherResult {
  const pass = received === expected;
  return {
    pass,
    message: (): string => `expected ${received} to be ${expected}`,
  }
}

expect.extend({
  myMatcher,
});

실제 예를 보려면 https://github.com/Quantum-Game/quantum-tensors/blob/master/tests/customMatchers.ts 을 참조하십시오. 실제로 테스트를 통과한 경우는 https://travis-ci.com/Quantum-Game/quantum-tensors) 을 참조하십시오.

추가"@types/testing-library__jest-dom"로.typestsconfig.json나를 위해 그 문제를 해결했습니다.

// tsconfig.json

"types": [
      "node",
      "jest",
      "@types/testing-library__jest-dom"
    ],

이 답변을 참조하십시오. 속성 'ToBeInTheDocument'가 'Matchers<any>' 유형에 없습니다.

언급URL : https://stackoverflow.com/questions/43667085/extending-third-party-module-that-is-globally-exposed

반응형