首页 文章

React，Jest，Enzyme如何通过商店redux传递测试App.js

提问于
浏览 次
2

使用 create-react-app 创建了一个简单的应用程序，然后更新了我的App.js并添加了redux / store .

class App extends Component {

  render() {

    return (
      <header className="header">
        <h1>todos</h1>
      </header>
    );
  }
}

function mapStateToProps(state) {
  return {
    data: state.data
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(ActionCreators, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

然后尝试使用Enzyme和Jest在App.test.js上测试我的应用程序 .

import React from 'react'
import Enzyme, { mount } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16';
import App from './App'

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

function setup() {
  const props = {
    addTodo: jest.fn()
  }

  const enzymeWrapper = mount(<App {...props} />)

  return {
    props,
    enzymeWrapper
  }
}

describe('components', () => {
  describe('App', () => {
    it('should render self and subcomponents', () => {
      const { enzymeWrapper } = setup()
      expect(enzymeWrapper.find('header')).toBe(true)
    })
  })
})

但抛出错误：不变违规：无法在“连接（应用程序）”的上下文或道具中找到“存储” . 将根组件包装在a中，或者将“store”显式传递为“Connect（App）”的prop .

有任何想法吗？

reactjs redux enzyme jest

1 回答

  • 1

    发生这种情况是因为您尝试在没有 <Provider> 的情况下测试组件（这通常会使存储可用于其子组件） .

    我通常在这种情况下做的是测试没有Redux connect 绑定的组件 . 为此，您可以导出 App 组件本身：

    export class App extends Component // etc...

    然后使用解构的赋值语法将其导入测试文件中：

    import { App } from './App'

    你可以假设（希望......;））Redux和React绑定已经被他们的创建者正确测试，并且花时间测试你自己的代码 .

    在Redux docs中有关于此的更多信息 .

    回复于

相关问题