标签: enzyme

我有一个<UserListComponent />输出一个<Contact />组件和提供的联系人列表<Contacts />.

问题是,在<UserListComponent />我尝试安装它的测试中,测试输出错误Invariant Violation: You should not use <Route> or withRouter() outside a <Router>

withRouter()用于<Contacts />组件.

如何ContactsComponent在没有路由器的情况下模拟父组件的测试？

我发现了一些类似的问题https://www.bountysource.com/issues/49297944-invariant-violation-you-should-not-use-route-or-withrouter-outside-a-router 但它只描述了组件的情况单独覆盖withRouter(),而不是儿童.

UserList.test.jsx

const mockResp = {
  count: 2,
  items: [
    {
      _id: 1,
      name: 'User1',
      email: 'email1@gmail.com',
      phone: '+123456',
      online: false
    },
    {
      _id: 2,
      name: 'User2',
      email: 'email2@gmail.com',
      phone: '+789123',
      online: false
    },
    {
      _id: 3,
      name: 'User3',
      email: 'email3@gmail.com',
      phone: …

最近，React 18 发布了，我将我的项目升级到了 18。我注意到我所有由 Jest 和 Enzyme 编写的单元测试都失败了。我使用 Enzyme 的 mount 作为组件的包装，并注意到以下错误：

TypeError: Cannot read property 'child' of undefined

我还尝试检查它是否支持 React 18，但找不到任何合适的链接。

有人对此有什么想法吗？或者在这种情况下有什么可以遵循的解决方法吗？

我正在使用酶与酶-json对我的React组件进行Jest快照测试.我正在测试DateRange组件的浅快照,该组件呈现具有当前范围的显示字段(例如5/20/2016 - 7/18/2016)和DateInput允许选择Date值的两个组件.这意味着我的快照包含Date我在DateInput道具中传递给组件的s 以及它自己解析的文本表示.在我的测试中,我正在使用创建一些固定日期new Date(1995, 4, 23).

当我在不同时区运行测试时,会生成不同的快照,因为Date(year, month, ...)构造函数会在本地时区创建日期.例如,使用new Date()在我的本地时区和CI服务器上的运行之间产生快照差异.

- value={1995-05-22T22:00:00.000Z}
+ value={1995-05-23T00:00:00.000Z}

我尝试从日期中删除时区偏移量,但随后快照在显示字段值中不同,其中使用了与本地时区相关的表示.

- value={5/20/2016 - 7/18/2016}
+ value={5/19/2016 - 7/17/2016}

如何使我的测试Date在快照中生成相同的s,而不管它们运行的​​时区是什么？

我最近想测试一些自定义方法在componentDidMountReact组件的方法中有条件地调用.

componentDidMount() {
  if (this.props.initOpen) {
    this.methodName();
  }
}

我正在使用Jest作为我的测试框架,其中包括jest.fn()模拟/间谍.我已经读过,通过做类似以下的事情,用Sinon测试这将是相当微不足道的:

sinon.spy(Component.prototype, "methodName");
const wrapper = mount(<Component {...props} />);
expect(wrapper.instance().methodName).toHaveBeenCalled();

我正试图用Jest重新创建这个:

Component.prototype.methodName = jest.fn();
const wrapper = mount(<Component {...props} />);
expect(wrapper.instance().methodName).toHaveBeenCalled();

此代码失败并引发以下错误:

jest.fn() value must be a mock function or spy.
Received:
  function: [Function bound mockConstructor]

是否可以使用Jest测试此功能？如果是这样,怎么样？

我正在使用Enzyme for React 编写测试.

我的测试非常简单:

import OffCanvasMenu from '../index';
import { Link } from 'react-router';

import expect from 'expect';
import { shallow, mount } from 'enzyme';
import sinon from 'sinon';
import React from 'react';

describe('<OffCanvasMenu />', () => {
  it('contains 5 <Link /> components', () => {
    const wrapper = shallow(<OffCanvasMenu />);
    expect(wrapper.find(<Link />)).to.have.length(5);
  });
});

此代码基本上直接来自airbnb/enzyme docs,但返回错误:

FAILED TESTS:
  <OffCanvasMenu />
    ? contains 5 <Link /> components
      Chrome 52.0.2743 (Mac OS X 10.11.6)
    TypeError: Cannot read …

我正在使用jest和酶与我的create-react-app项目.当我运行时npm test,我得到一个输出,显示传递的测试文件的名称,但我希望输出还包括测试的名称.

例:

Button.test.js

it ('renders button', () => {
    const button = shallow(<Button type="save"/>);
    expect(toJson(button)).toMatchSnapshot();
});

现在当我运行npm test时,输出只是:

通过src/Button.test.js"

以及通过和失败的测试次数(测试成功时).我希望输出包含"渲染按钮"和任何其他测试描述(例如运行rspec测试时输出的外观).

我试图模拟一个keyDown事件,专门用于输入,keyCode: 13.我已经尝试了许多不同的方法来做到这一点,但它们都没有奏效.我也看过网上,似乎这个功能要么是错误的,要么在当前版本的Enzyme中不起作用.有没有人知道这个功能是否有效,如果有的话,模拟输入或其他类型的关键事件的正确语法是什么？谢谢!

这就是我目前所拥有的,它不起作用:

const input = wrapper.find('input');
input.simulate('keyDown', {keyCode: 13});

我目前的酶版本是2.4.1

我的组件测试文件中有一个这样的模拟模块

  jest.mock('../../../magic/index', () => ({
    navigationEnabled: () => true,
    guidanceEnabled: () => true
  }));

这些函数将在我的组件的render函数中调用,以隐藏和显示一些特定的功能.

我想对这些模拟函数的返回值的不同组合拍摄快照.

假设我有一个像这样的测试用例

 it('RowListItem should not render navigation and guidance options', () => {
    const wrapper = shallow(
      <RowListItem type="regularList" {...props} />
    );
    expect(enzymeToJson(wrapper)).toMatchSnapshot();
  });

运行这个测试用例我想将模块模块函数的返回值false动态更改为这样

jest.mock('../../../magic/index', () => ({
    navigationEnabled: () => false,
    guidanceEnabled: () => false
  }));

因为我已经导入RowListItem组件一次所以我的模拟模块不会再次导入.所以它不会改变.我怎么能解决这个问题？

昨天我将我的React项目升级到v16.0,但我发现Enzyme有一些问题

    Error: 
      Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To
      configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
      before using any of Enzyme's top level APIs, where `Adapter` is the adapter
      corresponding to the library currently being tested. For example:
      import Adapter from 'enzyme-adapter-react-15';
      To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html

    at validateAdapter (spec/components/page_components/SongListItem/index.spec.js:9:1141986)
    at getAdapter (spec/components/page_components/SongListItem/index.spec.js:9:323041)
    at new ReactWrapper (spec/components/page_components/SongListItem/index.spec.js:9:622193)
    at mount (spec/components/page_components/SongListItem/index.spec.js:9:2025476)
    at UserContext.<anonymous> (spec/components/page_components/SongListItem/index.spec.js:9:1235741)

我在官方网站上找到了解决方案 …

我通过create-react-app创建了一个新的React应用程序,我想对我在应用程序中创建的名为"MessageBox"的组件编写单元测试.这是我写的单元测试:

import MessageBox from "../MessageBox";
import { shallow } from 'enzyme';
import React from 'react';

test('message box', () => {
   const app = {setState: jest.fn()};
   const wrapper = shallow(<MessageBox app={app}/>);
   wrapper.find('button').at(0).simulate('click');
   expect(app.setState).toHaveBeenLastCalledWith({modalIsOpen: false});
});

我还在'src'文件夹下添加了一个名为'setupTests.js'的文件,其中包含以下内容:

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

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

我通过以下方式运行:

npm测试

我收到了错误:

酶内部错误:酶需要配置适配器,但没有找到.要配置适配器,您应该调用Enzyme.configure({ > adapter: new Adapter() })

你知道什么可以解决这个问题吗？