小编wil*_*gon的帖子

我正在研究一个最近从旧的Webpack构建转换为使用的应用程序create-react-app.大多数过渡进展顺利,但我遇到了以前单元测试的一些主要问题.当我运行npm test具有标准的package.json测试脚本时"test": "react-scripts test --env=jsdom",它表示我的所有快照测试都失败了.这是很好的和预期的,因为已经有很多变化,测试需要更新.

但是,当我刚刚运行jest或者jest --updateSnapshot,我的所有测试都会立即失败并SyntaxError: Unexpected token出现错误,其中大部分与之相关import.这让我相信Jest没有使用Babel来正确转换ES6语法.

以前,我们使用带有以下设置的.babelrc文件:

{
"presets": ["env", "react", "stage-0", "flow"],
"plugins": ["transform-runtime", "add-module-exports", "transform-decorators-legacy"]
}

但由于create-react-app我已经将Babel包含在内,因此删除了此文件以及对Babel的任何引用.我的package.json也没有为Jest本身设置任何特殊脚本.

我已经尝试过添加一些以前使用过的Babel软件包了,但是在进一步阅读之后看起来似乎无论如何这些都不会起作用,除非我从那里弹出create-react-app并且这不是一个选项.

什么会导致npm test正确运行,但jest悲惨失败？

我有一个简单的测试文件设置,几乎与create-react-app使用的文件相同:

App.test.js

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);
});

当我运行时,yarn test我不断收到此错误消息:

Invariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "st ore" as a prop to "Connect(App)".

我已经尝试在我的App.js文件中执行单独的导出并导入非Redux组件,但我仍然无法使其工作.以下是我涉及的另外两个文件:

App.js

import React, { Component } from 'react';
import axios from 'axios';
import …

我正在尝试更习惯使用高阶组件，因此我正在重构应用程序。我有四个不同的组件，它们都重用相同的fetchData请求，以及错误/加载条件。我的计划是将这些可重复使用的数据放入 HOC。我已经尝试了 StackOverflow、Reddit、Github 等许多不同的示例，但没有一个在我的特定情况下有效。

这是我的 HOC：

const WithDataRendering = WrappedComponent => props => {
class WithDataRenderingComponent extends Component {
    componentDidMount() {
    this.props.fetchData(url)
    }
    render() {
    if (this.props.hasErrored) {
        return (
        <p>
            Sorry! There was an error loading the items:{" "}
            {this.props.hasErrored.message}
        </p>
        )
    }

    if (this.props.isLoading) {
        return (
        <div>
            <Skeleton count={10} />
        </div>
        )
    }

    return <WrappedComponent {...this.props} />
    }
}
const mapStateToProps = state => {
    return {
    data: state.data,
    hasErrored: state.dataHasErrored,
    isLoading: state.dataIsLoading
    }
} …