个人中心
gpt4 book ai didi

reactjs - 错误 shallow Jest Enzyme React 找不到 "store"

转载 作者：行者123 更新时间：2023-11-28 21:16:12 24 4
gpt4 key购买 nike

我在测试我的组件时遇到一个有趣的错误，现在不修复(

我使用 jest、enzyme、react、redux。

在应用程序的前端部分，一切正常。

我现在可以看到什么错误:

  ● Body Component › Body Component is loading › Is loading

    Invariant Violation: Could not find "store" in the context of "Connect(Body)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Body) in connect options.

      25 |       };
      26 | 
    > 27 |       const BodyComponent = shallow(<Body />);
         |                             ^
      28 |     });
      29 |   });
      30 | });

我的 setupTests.js:

import Enzyme, { shallow, render, mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
//import toJson from 'enzyme-to-json'

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

global.shallow = shallow;
global.render = render;
global.mount = mount;
//global.toJson = toJson

// Fail tests on any warning
console.error = message => {
  throw new Error(message);
};

我的组件测试:

import React from "react";
import Body from "./Body";
import  { shallow, render, mount } from "enzyme";

describe("Body Component", () => {
  const props = {
    data: {
      time: undefined,
      products: [],
      filteredProducts: [],
      search: undefined
    }
  };

  describe("Body Component is loading", () => {
    it("Is loading", () => {
      const nextProps = {
        ...props,
        data: {
          products: [{}, {}],
          filteredProducts: [{ name: "sdffd" }, { name: "sdf" }],
          search: "sdf"
        }
      };

      const BodyComponent = shallow(<Body  />);
    });
  });
});

我也可以发送我的组件:

import React from "react";
import ProductListItem from "./ProductListItem";
import { connect } from "react-redux";

const names = ["Seattle", "Bellevue", "Tacoma", "Puyallup"];

const Body = props => {
  const { products, filteredProducts, search } = props;
  console.log("FILTERED IN BODY", filteredProducts);
  console.log(products);
  return (
    <div className="main">
      {names.map(name => (
        <ProductListItem
          name={name}
          data={search ? filteredProducts : products}
          key={Math.random()}
        />
      ))}
    </div>
  );
};

const mapStatesToProps = state => {
  return {
    products: state.data.products,
    filteredProducts: state.data.filteredProducts,
    search: state.data.search
  };
};

export default connect(mapStatesToProps)(Body);

有人可以告诉我我做错了什么吗？我认为 {shallow} 有问题。也许有人知道如何解决此错误？

非常感谢!

最佳答案

您需要创建一个模拟的 store 并将其作为 props 传递给组件。 connect(mapStatesToProps)(Body) 语句将创建一个包装组件。所以需要使用enzyme的wrapper.find(Body)来获取Body无状态功能组件。

index.tsx:

import React from 'react';
import ProductListItem from './ProductListItem';
import { connect } from 'react-redux';

const names = ['Seattle', 'Bellevue', 'Tacoma', 'Puyallup'];

export const Body = props => {
  const { products, filteredProducts, search } = props;
  console.log('FILTERED IN BODY', filteredProducts);
  console.log(products);
  return (
    <div className="main">
      {names.map(name => (
        <ProductListItem name={name} data={search ? filteredProducts : products} key={Math.random()} />
      ))}
    </div>
  );
};

const mapStatesToProps = state => {
  return {
    products: state.data.products,
    filteredProducts: state.data.filteredProducts,
    search: state.data.search
  };
};

export default connect(mapStatesToProps)(Body);

index.spex.tsx:

import React from 'react';
import ConnectedBody, { Body } from './';
import { shallow } from 'enzyme';
import configureMockStore from 'redux-mock-store';

const initialState = {
  data: {
    time: undefined,
    products: [],
    filteredProducts: [],
    search: undefined
  }
};
const mockStore = configureMockStore();
const store = mockStore(initialState);

describe('Body Component', () => {
  const props = {
    data: {
      time: undefined,
      products: [],
      filteredProducts: [],
      search: undefined
    }
  };

  describe('Body Component is loading', () => {
    it('Is loading', () => {
      const nextProps = {
        ...props,
        data: {
          products: [{}, {}],
          filteredProducts: [{ name: 'sdffd' }, { name: 'sdf' }],
          search: 'sdf'
        }
      };

      const wrapper = shallow(<ConnectedBody store={store} />);
      const BodyComponent = wrapper.find(Body);
      expect(BodyComponent.prop('products')).toEqual(props.data.products);
      expect(BodyComponent.prop('filteredProducts')).toEqual(props.data.filteredProducts);
      expect(BodyComponent.prop('search')).toEqual(props.data.search);
    });
  });
});

单元测试结果:

PASS  src/stackoverflow/57942218/index.spec.tsx
  Body Component
    Body Component is loading
      ✓ Is loading (37ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.771s, estimated 5s

这是完整的演示:https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/57942218

关于reactjs - 错误 shallow Jest Enzyme React 找不到 "store"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57942218/

24 4 0
文章推荐： python - 在文件中找到最小的 float 并打印行
文章推荐： testing - 如何并行运行 nightwatch.js 测试？
文章推荐： ios - 如何从另一个类的方法中获取变量的实际值？
文章推荐： python - 将带有字典的 Python List 转换为一个字典的最快方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com