如何在React-Typescript应用程序中键入Rematch调度程序的Jest fn()模拟?

时间:2019-06-20 10:48:41

标签: javascript reactjs typescript jestjs

我正在尝试使用Jest使用Typescript测试React应用。应用和测试运行正常。我在传递到测试文件中的组件的模拟道具中键入重新匹配调度程序时遇到问题。如果我这样做:

const database = firebase.initializeApp(config); const firestore = database.firestore(); var provider = new firebase.auth.GoogleAuthProvider(); database.signIn = async (email, password) => { try { await firebase.auth().signInWithPopup(provider).then((result) => { // This gives you a Google Access Token. You can use it to access Google API. var token = result.credential.accessToken; // The signed-in user info. var user = result.user; console.log("user",user.displayName); console.log('result google',result.user); // ... store.commit("setCurrentUser", result.user); }).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... }); return true; } catch (error) { return error; } }

获取错误:

toggleUserForm={jest.fn<Dispatch>()}

如果将空数组作为第二个参数传递给jest.fn()-jest.fn(<'Dispatch,[]>)类型是不可分配的。

组件:

No overload expects 1 type arguments, but overloads do exist that expect either 0 or 2 type arguments.

测试:

interface FormBuilderProps {
    questions: Question[]
    toggleUserForm: Dispatch
    addQuestion: Dispatch
}

const FormBuilder: React.SFC<FormBuilderProps> = ({
    questions,
    toggleUserForm,
    addQuestion,
}): JSX.Element => {
    const validate = (): boolean => {
        const failedFields = questions.filter(q => q.text === '')
        if (failedFields.length === 0) return true
        return false
    }

    const submit = () => validate() && toggleUserForm()

    return (
        <>
            <QuestionList questions={questions} />
            <Button onClick={() => addQuestion({ text: '', type: 'text', level: 0 })}>
                Add Input
            </Button>
            <Button onClick={submit} disabled={questions.length === 0}>
                Make a form
            </Button>
        </>
    )
}

0 个答案:

没有答案