3

我正在尝试使用 Enzyme 测试组件，但出现以下错误：

Warning: Failed context type: The context `history` is marked as required in `Link`, but its value is `undefined`.
        in Link (at UserTable.js:30)
        in button (created by Button)
        in Button (at UserTable.js:29)
        in td (at UserTable.js:28)
        in tr (at UserTable.js:24)
        in tbody (at UserTable.js:43)
        in table (created by Table)
        in Table (at UserTable.js:41)
        in UserTable (at UserTable.test.js:19)

这是我的测试：

import React from 'react';
import { render } from 'enzyme';
import { fromJS } from 'immutable';
import { Table } from 'react-bootstrap';
import UserTable from '../UserTable';

const users = fromJS([{
    id: 2026429,
    login: 'rahulthewall',
    avatar_url: 'https://avatars1.githubusercontent.com/u/2026429?v=3',
    login: 'rahulthewall',
    html_url: 'https://github.com/rahulthewall',
}]);

describe('<UserTable />', () => {
    // Prepare the components
    const context = { router: { isActive: (a, b) => true } };
    const wrapper = render(
        <UserTable users={users} />,
        { context }
    );
    const table = wrapper.find('table');
    const thead = table.find('thead');
    const tbody = table.find('tbody');
    const headerRow = thead.find('tr');
    const bodyRows = tbody.find('tr');

    it('renders the table header', () => {
    expect(headerRow.length).toEqual(1);
        expect(headerRow.find('th').length).toEqual(4);
  });

    it('renders the table data', () => {
        expect(bodyRows.length).toEqual(1);
        expect(bodyRows.find('td').length).toEqual(4);
    });
});

所以我的问题是，如何在渲染时将 History 上下文传递给组件？我有点迷失在这里。

4

1 回答 1

5

是因为没有Router。如果你用<MemoryRouter>```包裹你的组件

<MemoryRouter>
    <ComponentClass/>
</MemoryRouter>

```

它应该解决一个问题。值得创建帮助程序来处理它，因为它会在您的所有情况下发生（至少与路由器 v4 相关的情况）。

于 2017-03-16T13:11:48.097 回答