编写反应组件的单元测试用例 [英] Write unit test case for a react component

问题描述

我是响应redux 的新手。我正在尝试为组件搜索功能编写一个单元测试用例，

I am new to the react redux. I am trying to write a unit test case for a component search functionality which looks like,

constructor(props) {
        super(props);
        this.staate = {
            search : ''
        }
    }

     onInputChnage = (e) => {
    this.setState({ search: e.target.value });
  }

    render() {

       const { jobs: { content } } = this.props;
        const { search } = this.state;
        const filteredList = content.filter(job => (job.jdName && job.jdName.toLowerCase().includes(search.toLowerCase())) || (job.technology && job.technology.toLowerCase().includes(search.toLowerCase())));

        return (
            <input type="text"
                id="searchJob"
                className="form-control-sm border-0 flex-grow-1"
                value={this.state.search}
                placeholder="Technology / Job title"
                onChange={this.onInputChnage} />
              <i className="fa fa-search search-job"></i>
        )
    }
}

数据就像

this.props.jobs = {
  content: [
    {
      id: '5b7d4a566c5fd00507501051',
      companyId: null,
      jdName: 'Senior/ Lead UI Developer',
      jobDescription: null,
      technology: 'java'
    },
    {
      id: '5b7d4a566c5fd005075011',
      companyId: null,
      jdName: 'ead UI Developer',
      jobDescription: null,
      technology: 'angular'
    }
  ]
};

因此，在这里我要测试此组件搜索。我为此使用麻雀和酶。有人可以帮我吗？

So, here I want to test this component search thing. I am using jest and enzymes for this . can anyone help me with this?

推荐答案

这是解决方案：

index.tsx ：

import React from 'react';

interface ISearchComponentOwnProps {
  jobs: { content: any };
}

interface ISearchComponentState {
  search: string;
}

export class SearchComponent extends React.Component<ISearchComponentOwnProps, ISearchComponentState> {
  constructor(props: ISearchComponentOwnProps) {
    super(props);
    this.state = {
      search: ''
    };
  }

  public render() {
    const {
      jobs: { content }
    } = this.props;
    const { search } = this.state;
    const filteredList = content.filter(
      job =>
        (job.jdName && job.jdName.toLowerCase().includes(search.toLowerCase())) ||
        (job.technology && job.technology.toLowerCase().includes(search.toLowerCase()))
    );

    return (
      <div>
        <input
          type="text"
          id="searchJob"
          className="form-control-sm border-0 flex-grow-1"
          value={this.state.search}
          placeholder="Technology / Job title"
          onChange={this.onInputChnage}
        />
        <i className="fa fa-search search-job"></i>

        <ul className="job-list">
          {filteredList.map(job => {
            return (
              <li key={job.id}>
                <span>jdName: {job.jdName}</span>
                <span>technology: {job.technology}</span>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }

  private onInputChnage = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ search: e.target.value });
  }
}

单元测试：

index.spec.tsx ：

import React from 'react';
import { shallow } from 'enzyme';
import { SearchComponent } from '.';

describe('SearchComponent', () => {
  const jobs = {
    content: [
      {
        id: '5b7d4a566c5fd00507501051',
        companyId: null,
        jdName: 'Senior/ Lead UI Developer',
        jobDescription: null,
        technology: 'java'
      },
      {
        id: '5b7d4a566c5fd005075011',
        companyId: null,
        jdName: 'ead UI Developer',
        jobDescription: null,
        technology: 'angular'
      }
    ]
  };

  it('should search and filter job list correctly', () => {
    const wrapper = shallow(<SearchComponent jobs={jobs}></SearchComponent>);
    expect(wrapper.find('#searchJob')).toHaveLength(1);
    const mockedChangeEvent = { target: { value: 'Lead' } };
    expect(wrapper.state('search')).toBe('');
    wrapper.find('#searchJob').simulate('change', mockedChangeEvent);
    expect(wrapper.state('search')).toBe('Lead');
    expect(wrapper.find('.job-list').children()).toHaveLength(1);
    expect(wrapper.html()).toMatchSnapshot();
  });
});

具有100％覆盖率的单元测试结果：

Unit test result with 100% coverage:

 PASS  src/stackoverflow/54456606/index.spec.tsx
  SearchComponent
    ✓ should search and filter job list correctly (19ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.tsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total
Time:        3.058s, estimated 5s

组件快照：

// Jest Snapshot v1

exports[`SearchComponent should search and filter job list correctly 1`] = `"<div><input type=\\"text\\" id=\\"searchJob\\" class=\\"form-control-sm border-0 flex-grow-1\\" value=\\"Lead\\" placeholder=\\"Technology / Job title\\"/><i class=\\"fa fa-search search-job\\"></i><ul class=\\"job-list\\"><li><span>jdName: Senior/ Lead UI Developer</span><span>technology: java</span></li></ul></div>"`;

这是已完成的演示： https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/54456606

这篇关于编写反应组件的单元测试用例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！