this.context пусто для componentDidMount, но только при тестировании - PullRequest
Новая
       15

this.context пусто для componentDidMount, но только при тестировании

0 голосов
/ 05 июня 2019

Я пытаюсь использовать реагирующий контекст API.У меня есть LoginContext, и я могу получить его при рендеринге, используя тег LoginContext.Consumer.

Однако я хочу иметь возможность получить доступ к этому контексту в функции componentDidMount.Я указал contextType в классе и могу использовать this.context в приложении.

Однако, когда дело доходит до тестирования, это, похоже, не работает.Я высмеиваю контекст и оборачиваю компонент в провайдереЭто прекрасно работает для метода рендеринга, но не для метода жизненного цикла.При отладке я вижу, this.context пусто.

Компонент: 

import { LoginContext } from '../context';

 class Field extends Component {

static contextType = LoginContext;

componentDidMount() {
        this.context.registerInput(this.props.name, this.props.isRequired); //this is empty in tests
    }

 render() {
        const { type, isRequired, name, label, placeholder } = this.props;
        const { registered } = this.state;
        const labelClass = `form__label ${isRequired ? 'form__label--required' : ''}`;

        return (<LoginContext.Consumer>
            {({ registerInput }) => {

                //  this.handleRegisterInput(registerInput); *it exists fine here in tests?

                return (
                    <Fragment>
                       <h1>dummy implementation</h1>
                    </fragment>)
 }}

        </LoginContext.Consumer>
        );
}
}

контекст: 

import {createContext} from 'react';

export const LoginContext = createContext({
    registerInput: () => {}
});

тест: 

test('it should register the input when the component mounts',() => {

        const labelName = 'Test';
        const context = {
            registerInput: jest.fn()
        };

        render(
            <LoginContext.Provider value={context}>
                <Field name={labelName} isRequired={true}/>
            </LoginContext.Provider>
        );
        expect(context.registerInput).toBeCalledWith(labelName,true);
    });

результат теста: Error: Uncaught [TypeError: registerInput is not a function] но он работает нормально вживую?

...