npm 包 enzyme-context 使用教程

简介

enzyme-context 是一个在 React 应用中测试组件时非常实用的 npm 包。它提供了一个方便的方法来传递 context，这使得我们可以在测试中非常轻松地模拟不同的 React 组件树状态。

在这篇文章中，我们将会学习如何在前端工程项目中使用 enzyme-context，并演示如何使用它来模拟 context 以及影响我们测试的状态。

步骤

安装

在使用 enzyme-context 之前，我们需要先在项目中安装它。

npm install --save-dev enzyme-context

我们还需要安装 react-test-renderer 和 enzyme 包。

npm install --save-dev react-test-renderer enzyme

配置

接下来，我们需要在我们的测试文件中配置 enzyme。

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

使用

我们将在下面的例子中演示如何使用 enzyme-context 配置一个简单的测试。

我们创建一个简单的 React 组件，这个组建需要 TastesContext 的值。

import React, { useContext } from 'react';
import TastesContext from './TastesContext';

export default function PizzaTaste() {
    const { taste } = useContext(TastesContext);

    return (
        <div>
            My pizza tastes like {taste}.
        </div>
    );
}

我们想要测试这个组件，并传递不同的 taste 值，以测试不同的结果。这里，我们使用 enzyme-context 包来实现这个过程。

import React from 'react';
import { mount } from 'enzyme';
import createReactContext from 'create-react-context';
import EnzymeContext from 'enzyme-context';
import PizzaTaste from './PizzaTaste';

test('Should render pizza taste correctly', () => {
    const TastesContext = createReactContext({ taste: 'Cheese' });

    const wrapper = mount(
        <EnzymeContext context={TastesContext}>
            <PizzaTaste />
        </EnzymeContext>
    );

    expect(wrapper.find('div').text()).toEqual('My pizza tastes like Cheese.');

    wrapper.setContext({ taste: 'Pepperoni' });
  
    expect(wrapper.find('div').text()).toEqual('My pizza tastes like Pepperoni.');
});

我们使用 createReactContext 创建一个 TastesContext。首次使用，我们测试的期望值应该是 Cheese。接着，我们调用了 setContext 方法来设置 TastesContext 为新的 taste 值，测试期望值改变为 Pepperoni。

在这个例子中，使用 EnzymeContext 让我们可以轻易、完美地模拟不同的 React 组件树状态，测试我们的 React 组件中的事件和状态。

总结

enzyme-context 是一个非常方便的 npm 包，使用它可以轻易、完美地模拟不同的 React 组件树状态，测试我们的 React 组件中的事件和状态。在本文中，您已经学习了使用 enzyme-context 来配置和测试您的 React 组件的基础知识。希望这篇文章对您有所帮助！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673ddfb81d47349e53b6f