Jest.js 使用HOC测试React组分方法

nuypyhwy  于 2022-12-08  发布在  Jest
关注(0)|答案(2)|浏览(201)

在主题中,我想测试具有HOC的React组件方法。
通常我是这样做的:

describe('component method', () => {
  it('returns with null or undefined value', () => {
    const wrapper = shallow(<Component />);
    expect(wrapper.instance().methodName());
  });
});

但是现在我有一些组件需要存储,所以我尝试这样做:

describe('component method', () => {
  it('returns with null or undefined value', () => {
    const wrapper = shallow(<Component store={store} />);
    expect(wrapper.instance().methodName());
  });
});

当然,存储被定义为:

const mockStore = configureMockStore();
let store;

但我收到错误

TypeError: wrapper.instance().methodName is not a function

会不会是因为我的组件是这样 Package 的?

export default withSocket(Component);

如果是,我该如何解决?

piok6c0g

piok6c0g1#

我想我找到了解决办法...

const mockStore = configureMockStore({});
const store = mockStore();

let wrapper;
beforeEach(() => {
    wrapper = shallow(<Component store={store} />)
        .dive()
        .dive();
});

describe("method", () => {
    it("returns correctly when prop is null or undefined", () => {
        expect(wrapper.instance().methodName(null)).toBe("Test");
        expect(wrapper.instance().methodName(undefined)).toBe("Test");
    });
});

我刚刚尝试使用dive(),但是它不起作用......当我添加第二个dive()时,它就开始了,但是我仍然不明白它会发生什么变化。是因为我在这个组件周围有HOC,所以我必须“潜入”里面才能得到它还是什么?

chy5wohz

chy5wohz2#

由于您只想测试组件,我建议您模拟HOC。
为此,请使用jest.mock并提供一个模拟实现
在你的测试文件里面做:

jest.mock('./path-to-the-hoc', () => function withSocket(Component) {
  // edit: should be inlined here to prevent this error:
  // > The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
  const { forwardRef } = require('react');
  

  const MockWithSocket = forwardRef((props, ref) => {
    return (
      <Component
        {...props}
        // if you need to test instance methods, forward a ref here
        ref={ref}
        // additionally you can add props that the HOC would add here
        foo="bar"
       />
    );
  });

  return MockWithSocket;
});

describe('blah', () => {
  it('blah', () => {
    // render the component as you normally would,
    // the mock above works the module level and will swap
    // the real implementation for your mock above
  });
});

编辑:React允许您通过引用访问示例方法。HOC添加了一个额外的抽象层,它将中断React访问示例的方式,因此为了允许访问,您必须使用forwardRef

相关问题