Question

几天来，我一直在为React-Redux应用编写一个有趣的测试。我正在测试仅显示一些帐户信息的页面。该页面是使用带有容器类的连接组件编写的。我已经成功测试了页面是否呈现，但是现在我试图测试页面是否显示正确的信息。看来我的主要问题是在创建模拟存储时遇到了麻烦。但是，我也想知道我是否正确编写了测试，因为许多网站都建议测试mapStateToProps函数（尽管我不知道该怎么做）。如果有人有任何建议，我将不胜感激！

这是容器类：

import {connect} from "react-redux";
import Account from "../components/Account";

const mapStateToProps = (state) => {
    return {
        email: state.user.email || "",
        firstName: state.user.firstName || "",
        lastName: state.user.lastName || "",
        joined: new Date(state.user.joined).toLocaleDateString(),
    };
};

const AccountContainer = connect (mapStateToProps)(Account);

export default AccountContainer;

这是我的考试：

import React from 'react';
import {shallow, mount} from 'enzyme';
import AccountContainer, {Account} from '../authed/components/Account';
import configureStore from 'redux-mock-store';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import * as Enzyme from 'enzyme';
import ReactSixteenAdapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new ReactSixteenAdapter() });

describe('Account Page Test', () => {
  const initialState = {
    email: "email@example.com",
    firstName: "John",
    lastName: "Doe",
    joined: new Date().toLocaleDateString(),
  }

  const mockStore = configureStore()
  let store, container

  beforeEach(() => {
    store = mockStore(initialState)
    container = shallow(<AccountContainer store={store}/>)
  })

  test('the connected component gets rendered', () => {
    expect(container.length).toEqual(1)
  });

  test('the prop matches with initialState', () => {
    expect(container.prop('email')).toEqual(initialState.email),
    expect(container.prop('firstName')).toEqual(initialState.firstName),
    expect(container.prop('lastName')).toEqual(initialState.lastName),
    expect(container.prop('joined')).toEqual(initialState.joined),
  });
});

Current Jest Results here

TL; DR：我是React / Redux和Jest的新手，需要帮助确定我的测试出了什么问题，并知道我是否在测试正确的东西

Answer 1

我将推荐与@Alex相同的名称。分别测试组件。您采用的方法并不是真正的单元测试。

但是，如果您想坚持自己的方法。我的猜测是用provider包装您的容器，并将存储传递给它可以使用。而且您必须将shallow渲染替换为mount

import React from 'react';
import {shallow, mount} from 'enzyme';
import AccountContainer, {Account} from '../authed/components/Account';
import configureStore from 'redux-mock-store';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import * as Enzyme from 'enzyme';
import ReactSixteenAdapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new ReactSixteenAdapter() });

describe('Account Page Test', () => {
  const initialState = {
    email: "email@example.com",
    firstName: "John",
    lastName: "Doe",
    joined: new Date().toLocaleDateString(),
  }

  const mockStore = configureStore()
  let store, container

  beforeEach(() => {
    store = mockStore(initialState)
    container = mount(<Provider store={store}>
              <AccountContainer />
            </Provider>)
  })

  test('the connected component gets rendered', () => {
    expect(container.length).toEqual(1)
  });

  test('the prop matches with initialState', () => {
    expect(container.prop('email')).toEqual(initialState.email),
    expect(container.prop('firstName')).toEqual(initialState.firstName),
    expect(container.prop('lastName')).toEqual(initialState.lastName),
    expect(container.prop('joined')).toEqual(initialState.joined),
  });
});

Answer 2

Official docs建议测试未连接的组件，因此，根据您的情况，您可以测试Account组件是否正确渲染了传递的道具。这比模拟商店要简单得多。

即如果Account只是一个静态容器，则可以测试它matches the snapshot：

import {Account} from '../authed/components/Account';
import * as Enzyme from 'enzyme';
import renderer from 'react-test-renderer';
import ReactSixteenAdapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new ReactSixteenAdapter() });

describe('Account Page Test', () => {
  const initialState = {
    email: "email@example.com",
    firstName: "John",
    lastName: "Doe",
    joined: "7/12/2018",
  }

  test('the prop matches with initialState', () => {
    const tree = renderer
    .create(<Account {...initialState}>)
    .toJSON();
     expect(tree).toMatchSnapshot();
  });
});

使用Jest建议测试React / Redux

2 个答案: