我如何在Jest，Enzyme中测试addEntry功能？

Question

这是我正在测试的代码

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函数？

Answer 1

您无法直接对其进行测试。您可以通过组件的行为对其进行测试。

例如

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