Question

我有一个使用useContext的组件，然后它的输出取决于上下文中的值。一个简单的例子：

import React, { useContext } from 'react';

const MyComponent = () => {
  const name = useContext(NameContext);

  return <div>{name}</div>;
};

使用来自react和jest快照的浅色渲染器测试此组件时。如何更改NameContext的值？

Answer 1

通常，使用钩子应该不会改变测试策略。实际上，这里更大的问题不是问题，而是上下文的使用，这使事情变得有些复杂。

有很多方法可以使这项工作，但是我发现与'react-test-renderer/shallow'一起工作的唯一方法是注入一个模拟钩子：

import ShallowRenderer from 'react-test-renderer/shallow';

let realUseContext;
let useContextMock;
// Setup mock
beforeEach(() => {
    realUseContext = React.useContext;
    useContextMock = React.useContext = jest.fn();
});
// Cleanup mock
afterEach(() => {
    React.useContext = realUseContext;
});

test("mock hook", () => {
    useContextMock.mockReturnValue("Test Value");
    const element = new ShallowRenderer().render(
        <MyComponent />
    );
    expect(element.props.children).toBe('Test Value');
});

这有点脏，而且是特定于实现的，因此，如果您能够在使用浅色渲染器时有所妥协，那么还有其他一些可用选项：

非浅层渲染

如果您不是浅层渲染，则可以将组件包装在上下文提供程序中以注入所需的值：

import TestRenderer from 'react-test-renderer';

test("non-shallow render", () => {
    const element = new TestRenderer.create(
        <NameContext.Provider value="Provided Value">
            <MyComponent />
        </NameContext.Provider>
    );
    expect(element.root.findByType("div").children).toEqual(['Provided Value']);
});

（免责声明：此应该有效，但是当我对其进行测试时，我遇到了一个错误，我认为这是我的设置中的一个问题）

通过酶和潜水进行浅渲染

正如@skyboyer所评论的那样，asen的浅层渲染器支持.dive，使您能够深层渲染其他浅层渲染组件的一部分：

import { shallow } from "./enzyme";

test("enzyme dive", () => {
    const TestComponent = () => (
        <NameContext.Provider value="Provided Value">
            <MyComponent />
        </NameContext.Provider>
    );
    const element = shallow(<TestComponent />);
    expect(element.find(MyComponent).dive().text()).toBe("Provided Value");
});

使用ReactDOM

最后，Hooks FAQ有一个使用ReactDOM测试钩子的示例，它也可以正常工作。自然，使用ReactDOM意味着这也是深度渲染，而不是较浅。

let container;
beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
});

afterEach(() => {
    document.body.removeChild(container);
    container = null;
});

test("with ReactDOM", () => {
    act(() => {
        ReactDOM.render((
            <NameContext.Provider value="Provided Value">
                <MyComponent />
            </NameContext.Provider>
        ), container);
    });

    expect(container.textContent).toBe("Provided Value");
});

Answer 2

或者，如果您在不安装父组件的情况下单独测试组件，则可以简单地模拟useContext：

jest.mock('react', () => {
  const ActualReact = require.requireActual('react')
  return {
    ...ActualReact,
    useContext: () => ({ }), // what you want to return when useContext get fired goes here
  }
})

您仍可以将动态useContext值与全局jest.fn一起使用

Answer 3

我尝试使用Enzyme + .dive，但是在潜水时，它无法识别上下文道具，而是默认道具。实际上，这是酶团队已知的问题。同时，我想出了一个更简单的解决方案，其中包括创建一个自定义钩子，以仅返回useContext与您的上下文，并在测试中模拟该自定义钩子的返回：

AppContext.js-创建上下文。

import React, { useContext } from 'react';

export const useAppContext = () => useContext(AppContext);

const defaultValues = { color: 'green' };
const AppContext = React.createContext(defaultValues);

export default AppContext;

App.js －提供上下文

import React from 'react';
import AppContext from './AppContext';
import Hello from './Hello';

export default function App() {
  return (
    <AppContext.Provider value={{ color: 'red' }}>
      <Hello />
    </AppContext.Provider>
  );
}

Hello.js-消耗上下文

import React from 'react';
import { useAppContext } from './AppContext';

const Hello = props => {
  const { color } = useAppContext();
  return <h1 style={{ color: color }}>Hello {color}!</h1>;
};

export default Hello;

Hello.test.js-用浅酶测试useContext

import React from 'react';
import { shallow } from 'enzyme';
import * as AppContext from './AppContext';

import Hello from './Hello';

describe('<Hello />', () => {
  test('it should mock the context', () => {
    const contextValues = { color: 'orange' };
    jest
      .spyOn(AppContext, 'useAppContext')
      .mockImplementation(() => contextValues);
    const wrapper = shallow(<Hello />);
    const h1 = wrapper.find('h1');

    expect(h1.text()).toBe('Hello orange!');
  });
});

在https://medium.com/7shifts-engineering-blog/testing-usecontext-react-hook-with-enzyme-shallow-da062140fc83

中查看完整的中型文章

Answer 4

要完成上述可接受的答案，对于非浅层渲染，我略微调整了代码以将组件简单地包裹在上下文中

import { mount } from 'enzyme';
import NameContext from './NameContext';

test("non-shallow render", () => {
    const dummyValue = {
      name: 'abcd',
      customizeName: jest.fn(),
      ...
    }; 
    const wrapper = mount(
        <NameContext.Provider value={dummyValue}>
            <MyComponent />
        </NameContext.Provider>
    );

    // then use  
    wrapper.find('...').simulate('change', ...);
    ...
    expect(wrapper.find('...')).to...;
});

Answer 5

旧帖子，但是如果对某人有帮助，这就是我的工作方式

import * as React from 'react';
import { shallow } from 'enzyme';

describe('MyComponent', () => {
  it('should useContext mock and shallow render a div tag', () => {
    jest.spyOn(React, 'useContext').mockImplementation(() => ({
      name: 'this is a mock context return value'
    }));

    const myComponent = shallow(
      <MyComponent
        props={props}
      />).dive();

    expect(myComponent).toMatchSnapShot();
  });
});

Answer 6

我所做的是测试是否使用了useContext。就我而言，useContext返回名为dispatch的函数。

在组件中，我有：

const dispatch = useContext(...);

，然后在onChange方法内：

dispatch({ type: 'edit', payload: { value: e.target.value, name: e.target.name } });

因此一开始就进行内部测试：

  const dispatch = jest.fn();
  React.useContext = (() => dispatch) as <T>(context: React.Context<T>) => T;

然后：

  it('calls function when change address input', () => {
   const input = component.find('[name="address"]');
   input.simulate('change', { target: { value: '123', name: 'address' } });

   expect(dispatch).toHaveBeenCalledTimes(1);
  });

如何测试依赖于上下文和挂钩的React组件？

6 个答案:

非浅层渲染

通过酶和潜水进行浅渲染

使用ReactDOM