javascript - Jest Enzyme setState of memoryRouter dependent

Question

我的任务是测试依赖于上层某处的 BrowserRouter 组件的 React 组件。据我所知，BrowserRouter 将路由对象传递给任何子对象、孙对象等的 props。

组件:

import React, { Component } from 'react';
import Program from './Program';

export default class Programs extends Component {
  constructor() {
    super();
    this.state = {
      programs: [
        /** example */
        { id: 10, name: 'Golden Knights' },
        { id: 20, name: 'Silver Lords' },
        { id: 30, name: 'Wooden Kings' },
      ],
    };
  }

  render() {
    const { programs } = this.state;
    return (
      <ul className="programs">{/*<-- add class "att-programs"*/}
        {
          programs.map(
            program => <Program
              key={program.id}
              program_id={program.id}
              program_name={program.name}
            />,
          )
        }
      </ul>
    );
  }
}

当我尝试独立测试此组件时，出现错误:无法读取未定义的属性“路由”。为了解决这个问题，我将我的元素包装到 MemoryRouter 组件中，我的测试如下所示:

import React from 'react';
import renderer from 'react-test-renderer';
import { mount, shallow } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';

import Programs from '../../src/components/Programs';

describe('<Programs />', () => {
  it('Renders list for any child from state', () => {

    const wrapper = mount(<MemoryRouter><Programs /></MemoryRouter>);
    const programs = wrapper.find(Programs);
    expect(programs.length).toBe(1);
    programs.setState({
      programs: [
        { id: 1, name: 'qwe' },
        { id: 2, name: 'asd' },
        { id: 3, name: 'zxc' },
      ],
    });

    expect(wrapper.find('li').length).toBe(3);
    expect(wrapper.find('a[href="/player/1"]').length).toBe(1);
  });
});

现在我有另一个问题:ReactWrapper::setState() can only be called on the root

请帮我弄清楚如何模拟路由器，但仍然能够在测试组件上定义 setState？

Answer 1

我建议不要直接更新组件的内部状态。哟有办法以某种方式(或你正在计划)操纵该状态。所以在测试期间使用这些机制。例如。您可能需要考虑通过 wrapper.simulate("click") 单击按钮并以这种方式更改状态。之后，您可以验证状态转换是否正确。