如何在测试文件中禁用打字稿规则 - React Enzyme答案

【问题标题】：How to disable typescript rule in test file - React Enzyme如何在测试文件中禁用打字稿规则 - React Enzyme
【发布时间】：2019-01-04 18:21:29
【问题描述】：

新的反应，我遇到了一个问题，如果我声明Enzyme.ReactWrapper 的类型，那么我会收到Object is possibly undefined 的编译错误。这特别是当我使用Enzyme.mount 方法时。我也是打字稿的新手，当我的测试通过时，我得到了错误，因为Enzyme.mount 可以返回未定义。处理这个问题的正确方法是什么？

let wrapper: Enzyme.ReactWrapper;
wrapper = Enzyme.mount(
    <AuthorQuiz {...(Object.assign({}, state, {highlight: 'correct'}))} onAnswerSelected={emptyHandler} />
);

【问题讨论】：

标签： reactjs typescript jestjs enzyme

【解决方案1】：

根据您在 TypeScript 中使用的 JavaScript API，您需要在 tsconfig.json 处显式声明 compiler options。
在您的情况下，您需要在tsconfig es6 lib (Object.assign) 中声明，例如：

"compilerOptions": {
   ...
   "lib": ["es6"]
}

要解决undefined的打字问题，如果你确定Enzyme.mount会返回一个实例，你可以强制转换返回值，比如：

let wrapper: Enzyme.ReactWrapper;
wrapper = Enzyme.mount(
    <AuthorQuiz {...(Object.assign({}, state, {highlight: 'correct'}))} onAnswerSelected={emptyHandler} />
) as Enzyme.ReactWrapper;

或者在同一行声明和赋值，这样就可以推断出变量类型：

const wrapper = Enzyme.mount(
    <AuthorQuiz {...(Object.assign({}, state, {highlight: 'correct'}))} onAnswerSelected={emptyHandler} />
);

如果在前面的示例中，wrapper 在 TypeScript 上可以是 undefined，您可以将它与 Non-null assertion operator 一起使用，例如 wrapper!.accessProperty。

【讨论】：