标签: enzyme

我正在为React应用程序编写集成测试,即一个测试多个组件的测试,我想模拟对外部服务的任何调用.

问题是测试似乎在执行异步回调之前执行,导致我的测试失败.

有没有办法解决？我可以以某种方式等待调用异步代码完成？

这是一些不好的伪代码来说明我的观点.

我想测试当我挂载Parent时,它的Child组件呈现从外部服务返回的内容,我将模拟.

class Parent extends component
{
     render ()
     {
         <div>
            <Child />
         </div>
     }
}
class Child extends component
{
     DoStuff()
     {
         aThingThatReturnsAPromise().then((result) => {
           Store.Result = result
         })
     }

    render()
    {
       DoStuff()
       return(<div>{Store.Result}</div>)


    }
}
function aThingThatReturnsAPromise()
{
     return new Promise(resolve =>{
          eternalService.doSomething(function callback(result) {
               resolve(result)
          }
    }

}

当我在测试中执行此操作时,它会失败,因为它会在回调被触发之前执行.

jest.mock('eternalService', () => {
    return jest.fn(() => {
        return { doSomething: jest.fn((cb) => cb('fakeReturnValue');
    });
});

describe('When rendering Parent', () => {
    var …

代码

import { createUser } from '../services';
...
...

handleFormSubmit = () => {  
  this.setState({ loading: true });
  createUser()
    .then(() => {
      this.setState({
        loading: false,
      });
    })
    .catch(e => {
       this.setState({
         error: e,
       });
    });
};

测试

 it('rejects...', () => {
    const Container = createUserContainer(CreateUser);
    const wrapper = shallow(<Container />);  

    return wrapper.instance().handleFormSubmit()
      .catch(e => {
         console.log("State: ", wrapper.state());
         expect(e).toEqual('error');
      });
 });

嘲笑

export const createUser = function() {
  return new Promise((resolve, reject) => {
    reject('error');
  });
};

测试确实强制代码进入方法中的捕获。所以状态确实被设置为“错误”。

但是在我的测试中，它没有按照我的预期进行操作，而是在测试状态更改之前等待 Promise …

我的Component样子

import React, {PropTypes} from 'react';
import TransactionListRow from './TransactionListRow';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow} from 'material-ui/Table';

const TransactionList = ({transactions}) => {
  return (
    <Table>
      <TableHeader displaySelectAll={false}>
        <TableRow>
          <TableHeaderColumn>Name</TableHeaderColumn>
          <TableHeaderColumn>Amount</TableHeaderColumn>
          <TableHeaderColumn>Transaction</TableHeaderColumn>
          <TableHeaderColumn>Category</TableHeaderColumn>
        </TableRow>
      </TableHeader>
      <TableBody>
        {transactions.map(transaction =>
          <TransactionListRow key={transaction.id} transaction={transaction}/>
        )}
      </TableBody>
    </Table>
  );
};

TransactionList.propTypes = {
  transactions: PropTypes.array.isRequired
};

export default TransactionList;

测试是

import {mount} from 'enzyme';
import TransactionList from './TransactionList';
import {TableHeaderColumn} from 'material-ui/Table';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

describe("<TransactionList />", ()=> {
  it('renders …

我有一个这样的组件:

<Parent>
  <Child/>
</Parent>

和<Child/>组件有一个方法foo.我想测试foo方法,但我不知道如何访问它.我试过了:

mount(<Parent><Child/></Parent>).props().children.foo

要么

mount(<Parent><Child/></Parent>).children().foo

但他们都是undefined.我无法使用,.instance()因为它不是root.我无法挂载<Child/>只是因为<Parent>添加了一些东西(react-router's context.router),context而我在init时需要它们<Child/>.有这个想法吗？

我正在使用酶+ mocha + chai来测试我的react-redux项目.酶提供浅层测试组分行为.但我没有找到测试路由器的方法.我正在使用react-router如下:

<Router history={browserHistory}>
     ...
        <Route path="nurse/authorization" component{NurseAuthorization}/>
     ...
  </Route>

我想测试这条路线nurse/authorization参考NurseAuthorization组件.如何在reactjs项目中测试它？

EDIT1

我react-router用作路由器框架.

从Enzyme docs 浅,渲染和mount都有描述,但何时使用哪种方法？

我有一个React组件,它包含在高阶组件withRouter中,如下所示:

module.exports = withRouter(ManageProfilePage);

我的路线如下:

<Route path="/" component={AdrApp}>
    <IndexRoute component={Login}/>
    <Route component={CheckLoginStatus}>
        <Route path="manage-profiles/:profileId" component=
        {ManageProfilesPage}/>
     </Route>
    <Route path="*" component={notFoundPage}/>
</Route>

我需要使用一次Router生命周期方法,这就是我需要withRouter的原因:

class ManageProfilePage extends React.Component {
    componentDidMount() {
    this.props.router.setRouteLeaveHook(this.props.route, () => {
      ...
    })
    render(){
    ... 
    }
}

我需要使用Jest/Enzyme测试这个组件,我编写了如下测试用例:

describe('manage profile page test suite', () => {


    it('snapshot test', () => {

        const setRouteLeaveHook =jest.fn();

        let wrapper = shallow(
            <ManageProfilePage params={{id : 25, router: 
        setRouteLeaveHook}}/>
        );
      expect(wrapper).toMatchSnapshot();
    })
   }) 

问题是它没有渲染一个层次.我正在粘贴下面的快照:

exports[`manage drug term page test suites snapshot test 1`] …

我有如下标题组件：

import { useLocation } from "react-router-dom";

const Header = () => {
   let route = useLocation().pathname; 
   return route === "/user" ? <ComponentA /> : <ComponentB />;
}

您将如何模拟这个 useLocation() 以获取用户路径？

我不能简单地在我的测试文件中调用 Header 组件，因为我收到错误：

类型错误：无法在 useLocation 读取未定义的属性“位置”

describe("<Header/>", () => {
    it("call the header component", () => {
        const wrapper = shallow(<Header />);
        expect(wrapper.find(ComponentA)).toHaveLength(1);
    });
});

我试过看起来类似于链接如何使用新的反应路由器钩子测试组件？但它没有用。

我试过如下：

const wrapper = shallow(
      <Provider store={store}>
        <MemoryRouter initialEntries={['/abc']}>
          <Switch>
            <AppRouter />
          </Switch>
        </MemoryRouter>
      </Provider>,
    );
    jestExpect(wrapper.find(AppRouter)
      .dive()
      .find(Route)
      .filter({path: '/abc'}) …

我正在尝试使用react-testing-library测试材质 ui 文本字段。

我面临的问题是，为了测试材质 ui textField 我必须使用这个属性方法

screen.getByLabelText()

这是有效的，但是我不想在 UI 上显示标签，我希望标签保持隐藏，因为我已经在使用 Material UI <FormLabel>。

我尝试使用 inputProps 并data-testId使用该getByTestId()方法传递元素。但我收到这个错误

TestingLibraryElementError：通过以下方式找到多个元素：[data-testid =“bio”]

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Run Code Online (Sandbox Code Playgroud)

editForm.test.tsx

import "@testing-library/jest-dom";
import React from "react";
import { createMount } from "@material-ui/core/test-utils";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import EditProfileForm from "./editForm";
import { render as testRender, fireEvent, screen, getByText } from "@testing-library/react";
const …

我是单元测试的新手.我想测试React项目.当我开始使用React文档时,它将酶称为测试实用程序,这对我来说是一种模糊的.

Jest和之间有什么区别enzyme？

• 是enzyme断言库还是任务转轮？
• 我可以karma用Jasmine吗？
• 测试react-redux项目的最佳方法是什么？