Question

我正在尝试使用reacts上下文API。我有一个LoginContext，可以使用LoginContext.Consumer标签在渲染中到达它。

但是，我希望能够在componentDidMount函数中到达此上下文。我在类中指定了contextType，并且可以在应用程序中使用this.context很好。

但是，当涉及到测试时，这似乎不起作用。我模拟上下文并将组件包装在提供程序中。这对于render方法很好，但对生命周期方法中的任何东西都不起作用。在调试时，我可以看到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]，但可以正常运行吗？

this.context在componentDidMount上为空，但仅在测试时

0 个答案: