Question

我的应用运行正常，这是主文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from '../src/store/store';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

我最初使用react创建一个应用程序来使我的项目在这里找到： https://github.com/facebookincubator/create-react-app 然后我将Redux添加到我的应用程序中。

在我将Redux添加到我的应用程序进行状态管理后，原始单元测试中断了。

以下是测试：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
});

如何修复单元测试以使其通过？

Answer 1

您还没有详细了解您所遇到的错误，但我认为没有为connected组件存储商店。

您可以使用redux-mock-store之类的内容创建预期状态，然后将App包裹在Provider中，就像在主文件中一样。像

这样的东西

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store'
import App from './App';

const middlewares = []
const mockStore = configureStore(middlewares)

it('renders without crashing', () => {

  const initialState = { /*expected state goes here */ }
  const store = mockStore(initialState)

  const div = document.createElement('div');
  ReactDOM.render(<Provider store={store}><App /></Provider>, div);
});

注意：我还想提醒您，此测试现在可能对您有用，但是您的应用越复杂，越难以维持，因为越来越多的状态是需要渲染。您可能希望查看enzyme等工具，并使用单个组件的浅呈现来测试您的应用程序。

Answer 2

当您将Redux添加到您的应用程序时，您需要使用模拟商店初始化您的应用程序。与迈克尔所说的大致相同。

在将Redux添加到我的ReactJS应用程序后，如何修复此损坏的单元测试？

2 个答案: