Какой юнит тест настроен правильно? Проверяют ли оба теста правильность и правильность работы функции?

Question

Я только начал проводить некоторые юнит-тесты для React JS - используя Jest / энзим.Я хотел бы знать, какой тест (формат) является более полезным и правильным для использования в будущих тестах.Это два разных теста, над которыми я сейчас работаю.

Юнит-тест 1: я писал большинство своих тестов на основе этого набора

import React from 'react';
import Enzyme from 'enzyme';
import { shallow} from 'enzyme';
import EditWorkflow from './EditWorkflow';
import Adapter from 'enzyme-adapter-react-15';


//render must import shallow = method to show object structure
//Unit Test  V
Enzyme.configure({ adapter: new Adapter() })

 describe ('<Workflow />', () => {
    it( 'renders 1 <Workflow /> Component', () => {
        const Component = shallow(<EditWorkflow  name= "workflow"/>);
       expect(Component).toHaveLength(1);

    });
    describe('It renders props correctly', () => {
        const Component = shallow(<EditWorkflow name= "workflow"/>);
        expect(Component.instance().props.name).toBe('workflow');
    })
});

** Юнит тест 2 Другой способ написания юнит теста ****

import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import { Login } from './App';
 import renderer from 'react-test-renderer';

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

let defaultProps = {
 getSessionContext: jest.fn(),
 checkSession: jest.fn(),
     }

let mockCheckSession;

describe('Login', () => {
 beforeEach(() => {
 mockCheckSession = jest.fn(()=>{return true})
 defaultProps = {
 getSessionContext: jest.fn(),
 checkSession: mockCheckSession,
 }
  })

  it('should render "authorizing..." if theres no session ', () => {
   mockCheckSession = jest.fn(()=>{return false})
   defaultProps.checkSession = mockCheckSession;

  const tree = renderer
  .create(<Login {...defaultProps} />)
  .toJSON();

  expect(tree).toMatchSnapshot();
})
  it('should render null if there is a session ', () => {
  mockCheckSession = jest.fn(()=>{return true})
  defaultProps.checkSession = mockCheckSession;    

  const tree = renderer
  .create(<Login {...defaultProps}/>)
  .toJSON();

 expect(tree).toMatchSnapshot();
 })
 })

Answer 1

Поскольку вы не предоставляете полный код, вам сложно помочь с вашим текущим компонентом. Вот несколько общих советов:

Одна из целей написания (хороших) модульных тестов для ваших компонентов React - убедиться, что ваш компонент ведет себя и рендерит так, как вы этого хотите. Что я обычно делаю, в этой части нет правильного или неправильного, так это начинаю читать функцию рендеринга сверху вниз и записываю каждую логическую часть.

Пример № 1:

Просто проверьте, установлен ли className на правом элементе.

class Screen extends Component {
  render() {
    return (
      <div className={this.props.className}>
        <h1>My screen</h1>
      </div>
    );
  }
}

it('should set the className on the first div', () => {
  const wrapper = shallow(<Screen className="screen" />);

  expect(wrapper.hasClass('screen')).toBeTruthy();
});

Пример № 2:

Если компонент отображает деталь условно, вы хотите проверить оба случая.

class Screen extends Component {
  render() {
    return (
      <div className={this.props.className}>
        <h1>My screen</h1>
        {this.props.subheading ? <h4>{this.props.subheading}</h4> : null}
      </div>
    );
  }
}

it('should not render the subheading when not given by prop', () => {
  const wrapper = shallow(<Screen />);

  expect(wrapper.find('h4').exists()).toBeFalsy();
});

it('should render the subheading when given by prop', () => {
  const wrapper = shallow(<Screen subheading="My custom subheading!" />);

  expect(wrapper.find('h4').exists()).toBeTruthy();
  expect(wrapper.find('h4').text()).toEqual('My custom subheading!');
});

Я могу привести еще несколько примеров, но я думаю, что вы поймете идею.