测试用例 React with Node js

Question

我的站点正在使用 react 和 node 。为此，我在反应端使用酶创建了测试用例，而我正在使用 Mocha 从服务器站点创建了测试用例。当我使用终端命令 (npm test) 时，两者都正常工作，它显示失败和成功结果。但我想从 ui 界面做测试用例。

基本上我想用一个命令支持（nodejs）函数，现在我的测试用例在不同的终端上工作例如，对于反应，我在一个终端中打开，对于节点端测试用例，我打开了另一个终端。

这是我的节点端代码:-

const request = require('supertest');
const expect = require('chai').expect;
const req = 'http://localhost:3000';
 this.user_id = '';

describe('Register form', function() {
    it('User saved successfully in database', function(done) {
        request(req)
           .post('/users/register')
           .set('Accept', 'application/json')
           .set('Content-Type', 'application/json')
           .send({user:{disabled: false,
                    email: "dineshsharma.developer@gmail.com",
                    firstName: "test",
                    lastName: "test",
                    password: "24234234ds",
                    roles: "hr",
                    status: "verified"}})
           .expect(200)
           .expect('Content-Type', /json/)
           .expect(function(response) {
           })
           .end(done);
    }); 
});

这是反应边代码：-

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import Select from 'react-select'
import config from 'config';
import { Alert } from 'reactstrap';
import { userActions } from '../../../src/actions';

import Enzyme, {shallow,mount,render,unmount} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import RegisterPage from '../../../src/features/RegisterPage/RegisterPage';
import { MemoryRouter } from 'react-router-dom';

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

describe('In register page check react syntex', () => {
  it('Should RegisterPage shallow correctly in "debug" mode', () => {
    const component = (<RegisterPage debug />);
    expect(component).toMatchSnapshot();
  });
}); 

describe('On register page count input filed', () => {
     it('Total text filed', () => {
      expect(shallow(<RegisterPage />).find('input[type="text"]').length).toEqual(2)
     })
    it('Total email filed', () => {
      expect(shallow(<RegisterPage />).find('input[type="email"]').length).toEqual(1)
     })
    it('Total checkbox filed', () => {
      expect(shallow(<RegisterPage />).find('input[type="checkbox"]').length).toEqual(1)
     })
    it('Total radio filed', () => {
      expect(shallow(<RegisterPage />).find('input[type="radio"]').length).toEqual(2)
     })
}); 


describe('On Register page check firstname , lastname or email address vaildation', () => {  
  it('Check first name in registerpage ', () => {
   const wrapper = mount(<RegisterPage />);
   wrapper.find('input[name="firstName"]').simulate('change', {target: {name: 'firstName', value: 'dinesh'}}); 
   expect(wrapper.state().user.firstName).toEqual('dinesh');    
  })

  it('Check lastname in register page ', () => {
   const wrapper = mount(<RegisterPage />);
   wrapper.find('input[name="lastName"]').simulate('change', {target: {name: 'lastName', value: 'Sharma'}});
   expect(wrapper.state().user.lastName).toEqual('Sharma');   
  })

  it('Check email address in register page', () => {
  const wrapper = mount(<RegisterPage />);
  wrapper.find('input[name="email"]').simulate('change', {target: {name: 'email', value: 'dineshsharma.developer@gmail.com'}});
  expect(wrapper.state().user.email).toEqual('dineshsharma.developer@gmail.com');   
  })

})

Answer 1

如果您想运行在一个终端中同时测试前端和后端，您可以修改 package.json 脚本部分，使其看起来像这样。

{
    "scripts": {
        "test": "mocha <path to node test files> && jest <path to react test files>"
    }
}

每次你运行 npm test 两组测试都会运行.

测试用例 React with Node js

Test case React with Node js

mocha.js

node.js

reactjs

enzyme