Как проверить функцию addEntry в Jest, Enzyme? - PullRequest
Новая
       10

Как проверить функцию addEntry в Jest, Enzyme?

0 голосов
/ 24 марта 2020

Это мой код, который я тестирую 

import Entry from "./Entry";
import CreateEntry from "./CreateEntry";

function CustomEntry() {
  const [entries, setEntries] = useState([]);
  const addEntry = title => {
    const newEntries = [...entries, { title }];
    setEntries(newEntries);
  };
   return (
      <div className="create-entry">
        <CreateEntry data-testid="addEntryTest" addEntry={addEntry} />
        {entries.map((entry, index) => (
          <Entry
            data-testid="entryTest"
            entry={entry}
            index={index}
            removeEntry={removeEntry}
            key={index}
          />
        ))}
    </div>
  );
}
export default CustomEntry;

Как передать данные в функцию addEntry?

1 Ответ

0 голосов
/ 08 апреля 2020

Вы не можете проверить это напрямую. Вы можете проверить это через поведение компонента.

Например

index.jsx: 

import React, { useState } from 'react';
import Entry from './Entry';
import CreateEntry from './CreateEntry';

function CustomEntry() {
  const [entries, setEntries] = useState([]);
  const addEntry = (title) => {
    const newEntries = [...entries, { title }];
    setEntries(newEntries);
  };
  return (
    <div className="create-entry">
      <CreateEntry addEntry={addEntry} />
      {entries.map((entry, index) => (
        <Entry entry={entry} index={index} key={index} />
      ))}
    </div>
  );
}
export default CustomEntry;

Entry.jsx: 

import React from 'react';
const Entry = ({ entry, index }) => <div>{entry.title}</div>;

export default Entry;

CreateEntry.jsx: 

import React from 'react';
const CreateEntry = ({ addEntry }) => (
  <div>
    <button onClick={() => addEntry('entry title')}>add Entry</button>
  </div>
);

export default CreateEntry;

index.test.jsx: 

import CustomEntry from './';
import { mount } from 'enzyme';
import React from 'react';
import Entry from './Entry';

describe('60838636', () => {
  it('should add entry', () => {
    const wrapper = mount(<CustomEntry></CustomEntry>);
    expect(wrapper.find(Entry).length).toBe(0);
    wrapper.find('button').simulate('click');
    expect(wrapper.find(Entry).length).toBe(1);
  });
});

Результаты модульного теста со 100% покрытием: 

 PASS  stackoverflow/60838636/index.test.jsx (8.118s)
  60838636
    ✓ should add entry (56ms)

-----------------|---------|----------|---------|---------|-------------------
File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------|---------|----------|---------|---------|-------------------
All files        |     100 |      100 |     100 |     100 |                   
 CreateEntry.jsx |     100 |      100 |     100 |     100 |                   
 Entry.jsx       |     100 |      100 |     100 |     100 |                   
 index.jsx       |     100 |      100 |     100 |     100 |                   
-----------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.144s

исходный код: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60838636

...