如何测试分派 Redux / Thunk 操作的 React 组件

Question

我正在为一个组件编写集成测试，该组件应该根据异步（thunk）redux 操作的响应重定向到特定路径。

这是我的组件的简化版本：

class MyComponent extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      redirect: false

    }

    this.props.dispatch(asyncThunkAction())

      .then( () => this.setState({redirec: true}) )

      .catch( (err) => console.log('action failed') )

  }

 ...

  render() {

    if (this.state.redirect) {

      return <Redirect to='/whocares' />

    }

    ...

  }

}

function mapStateToProps(state) {

  return {

     ...

  };

}

export default connect(mapStateToProps)(MyComponent);

我想编写一个测试，断言组件重定向到预期路径。

我正在使用这种技术来检查实际的重定向路径（它并不完美，但不是这个问题的重点）。

我卡住的地方是.then()下面 redux/thunk 动作中的状态变化。因为这是一个承诺，重定向发生在我的expect声明之后，所以我无法测试。

这是我的测试的样子：

const middlewares = [thunk];

const mockStore = configureStore(middlewares);

  test('redirects after thunk action', () => {

    const redirectUrl = '/whocares'

    const data = {};

    jest.mock('../actions');

    act(() => {

      ReactDOM.render(

        <TestRouter

            ComponentWithRedirection={<MyComponent store={mockStore(data)} />}

            RedirectUrl={redirectUrl}

        />, 

        container);

    });

    expect(container.innerHTML).toEqual(

      expect.stringContaining(redirectUrl)

    )

  })

我的 TestRouter 只是将预期的重定向 URL 打印到 DOM 中。（查看上面的链接以获取有关此 hack 的完整说明。）因此，现在我的测试（正确）识别了在 thunk 操作进行时出现的加载屏幕，而不是到达预期的路线。

我认为这样做的正确方法是模拟响应，asyncThunkAction以便它返回具有匹配数据的已解决承诺，但到目前为止我还没有弄清楚如何做到这一点。我按照手动模拟的 Jest 文档创建了相应的模拟文件：

// __mocks__/actions.js

const asyncThunkAction = function(){

    return Promise.resolve({foo: 'bar'});

};

export { asyncThunkAction };

...但我的测试仍然“看到”加载状态。我什至不认为它正在查看我的模拟文件/操作。

这样做的正确方法是什么？

Answer 1

这是我如何让这个工作的“食谱”......使用测试库/反应...import { render, fireEvent, waitForElement, act } from '@testing-library/react';（+1 给@tmahle 这个建议）通过创建“手动模拟”来模拟 axios（或者在我的情况下是包装它的 API 模块），这基本上需要__mocks__在包含同名文件的真实文件旁边创建一个目录。然后导出一个具有替换get方法（或您的代码使用的任何一个）的属性的对象。//__mocks__/myclient.jsexport default {&nbsp; get: jest.fn(() => Promise.resolve({ data: {} }))};即使您不在测试中调用模拟代码，您也需要import在测试文件中调用它...import myapi from '../api/myapi';jest.mock('../api/myai');您可以模拟来自模拟 API 调用的响应，如下所示：myapi.get.mockResolvedValueOnce({&nbsp; data: { foo: "bar" },});我对这部分有点模糊......即使模拟的 API 请求立即以已解决的承诺响应，您可能需要wait编写expectsconst { getByText, getByTestId, container } = render(<MyComponent />);await wait(() => getByText('Some text that appears after the '));expect(container.innerHTML).toEqual('whatever');所有这些都在各种文档和 SO 问题中“出现在那里”......但我花了很长时间才把它们拼凑在一起。希望这可以节省您的时间。

Answer 2

诚然，这是对您的问题的一个侧面回答，但我建议您尝试使用 testing-library 及其所体现的理想，尤其是对于集成测试。它在 DOM 和 React 两种风格中都可用，使用哪一种可能取决于您的重定向发生在什么抽象级别：https://github.com/testing-library/dom-testing-library&nbsp;https://github.com/testing-library/react-testing-library使用此范例，您不会尝试断言用户被重定向到正确的路径，而是在重定向后屏幕上显示正确的内容。您还可以将您的模拟限制在绝对必要的范围内（如果您正在进行真正的集成测试，则您的测试环境无法模拟的可能没有或只有浏览器 API）。这里的整体方法可能会让你模拟更少，并且可能渲染应用程序的更大部分。一个可能有用的例子可以在这里找到：https&nbsp;:&nbsp;//codesandbox.io/s/github/kentcdodds/react-testing-library-examples/tree/master/?fontsize=14&module=%2Fsrc%2F__tests__%2Freact -router.js&previewwindow=tests由于这种方法中的嘲讽较少，因此您如何实现这一点的具体细节可能超出了您所提供示例的范围，但上面的示例链接应该对入门有很大帮助。