Jest with stylized themeProvider components

Question

I mean this github project , and I'm trying to write a simple KeyPad.js test .

I saw problems open on this issue, and one suggested solution is to convey the topic as a pillar for the component. This solution will not work with the enzyme.

The problem in my case is that the child components get the theme through ThemeProvider and in order to do the test work, I would need to add support for the themes for everyone.

Example:

const tree = renderer.create(
        <KeyPad 
            theme={theme}
            cancel={()=> true}
            confirm={()=> true}             
            validation={()=> true}
            keyValid={()=>true} />
      ).toJSON();
      expect(tree).toMatchSnapshot();

KeyPad's rendering method would change this way with the theme prop everywhere

render() {
        let { displayRule, validation, label, confirm, cancel, theme, keyValid, dateFormat } = this.props
        return (
            <Container theme={theme}>
                <Content theme={theme}>
                    <Header theme={theme}>
                        <CancelButton theme={theme} onClick={cancel}>
                            <MdCancel />
                        </CancelButton>
                        <Label>{label}</Label>
                        <ConfirmButton theme={theme} onClick={() => confirm(this.state.input)} disabled={!validation(this.state.input)}>
                            <MdCheck />
                        </ConfirmButton>
                    </Header>
                    <Display
                        theme={theme}
                        value={this.state.input}
                        displayRule={displayRule}
                        dateFormat={dateFormat}
                        cancel={this.cancelLastInsert} />
                    <Keys>
                        {[7, 8, 9, 4, 5, 6, 1, 2, 3, '-', 0, '.'].map( key => (
                            <Button
                                theme={theme}
                                key={`button-${key}`}
                                theme={theme} 
                                click={(key) => this.handleClick(key) }
                                value={key}
                                disabled={!keyValid(this.state.input, key, dateFormat)} />
                        ))}
                    </Keys>
                </Content>
            </Container>
        )    
    }

I do not like this decision. Can anybody help me?

thanks

Answer 1

, . , .

, , . : https://reactjs.org/docs/context.html

, . : Redux mobx. ,

. , .

Answer 2

props theme. , , theme, Cannot read property ... of undefined undefined. , , .

...
color: ${({ theme = {} }) => theme.background};
...