如何测试组件是否仅具有允许的道具并仅将具有允许的类与Jest一起使用？

如何解决如何测试组件是否仅具有允许的道具并仅将具有允许的类与Jest一起使用？

我有一个看起来像这样的Button组件：

const Button = ({
    children,type,btnStyles,onClick,}: any) => {
    //...
}

export default Button

我不会确保该按钮仅与上面定义的允许道具一起使用。我的测试目前看起来像这样：

it('should only have the allowed props',() => {
    const tree = shallow(
        <Button
            type='button'
            buttonStyles='a-custom-button'
            onClick={() => {
                console.log('Custom Button Clicked')
            }}
        >
            <i></i>
            Button
        </Button>
    )

    expect(tree.prop('type')).tobedefined()
    expect(tree.prop('buttonStyles')).tobedefined()
})

我也想确保buttonStyles只能使用允许的类名。例如，按钮只能包含.a-custom-button和.a-custom-button-styles类。

如何用Jest做到这一点？

解决方法

@清晰度正确。您正在使用TypeScript，因此可以使用有效类名的并集：

type ButtonProps = {
  btnStyles: 'a-custom-button' | 'a-custom-button-styles';
}

const Button = ({
    btnStyles,}: ButtonProps) => {
   console.log(btnStyles);
   return null;
}

Button({ btnStyles: 'a-custom-button' })        // works
Button({ btnStyles: 'a-custom-button-styles' }) // also works
Button({ btnStyles: 'invalid-class-name' })     // doesn't work - invalid prop value in TypeScript

游乐场： https://www.typescriptlang.org/play?#code/C4TwDgpgBAQgrsYB7AdgBQE5LAZygXigG8AoKKAI2BQGVQAbCHALigHIBDAWgGM4dkAWy4UEyFGygAfdtz4Ckw0YlRcBIRjjYBuEgF8SJHqgGwxqAlAAUpcuSq0GTADT7W8Feiy4AlAQB8xGTkxig4SIwAdPRIAOZWDnQaTD66dhgQwHAYKFAocPT0ugYkHuI2lNRJmqycvPxCIuYSUHp+dh0A9J1QAO5IGADWOKXNFYlOLLL1CkrNapOSbVDdUBz04X0Dw6Oe41WTtQCWKABu60cAJrz0HDg4XCgcghBL7XarJ+f0V1Bg3lBvnBoAAVcAQGg8DBHMDAKAQDBYDAkIA