私はjestを使用してreact-testing-library
おり、アプリの単体テストカバレッジを提供しています。
私はこの便利なヘルパー関数KentC.Doddsが彼のビデオの1つで示したものを使用します。
const renderWithRedux = ui => ({
...render(<Provider store={store}>{ui}</Provider>),
store,
});
接続されたコンポーネントをテストするときに使用します。
コンポーネントをレンダリングするために、テストを正確に解決するためにデータをフェッチする必要がある、または少なくともモックデータをストアに注入する必要があるという問題が発生しています。私はそうすることに失敗しています
これは私のテストです:
test('navbar accepts props', async () => {
/**
* Something I was testing
*/
const functionToTest = () => async dispatch => {
dispatch(fetchTickets());
};
functionToTest();
const isReady = true;
const mockData = {
sessionInformation: {
ticket: { label: 'Total Tickets' },
sessionDuration: { sessionLabel: 'Session Duration', duration: 42 },
equipment: { type: 'Desktop', operatingSystem: 'Windows' },
},
component: { isReady },
tickets: {
ticketPayload: [
{
number: '1020312039',
shortDescription: 'Accessories',
status: 'Active',
createdOnEpoch: 1512322200000,
},
],
},
};
const data = renderWithRedux(<Navbar props={mockData} />);
});
私がテストしているコンポーネント:
const NavBar = ({
openTickets: { label },
sessionDuration: { sessionLabel, duration },
tickets: { ticketPayload = [] },
isReady,
}) => (!isReady ? (
<Container>
<LogoContainer>
<Logo src={logo} alt="logo" />
<Header>Service Desk</Header>
</LogoContainer>
<SessionInformation className="session">
<NavbarInfo className="session-info">
<p>
<FontAwesomeIcon icon="ticket-alt" className="ticketIcon" />
{label}
</p>
<p>{`${ticketPayload.length} tickets`}</p>
</NavbarInfo>
<NavbarInfo last className="session-info">
<p>
<FontAwesomeIcon icon="clock" className="ticketIcon" />
{sessionLabel}
</p>
<p>{`${duration} minutes`}</p>
</NavbarInfo>
{hasTokens() && (
<Button type="submit" onClick={() => console.log('notes')}>
Notepad
</Button>
)}
</SessionInformation>
</Container>
) : (
<LoaderContainer>
<RingLoader size={100} />
</LoaderContainer>
));
長さの計算はticketPayload
本店を優先して行う必要があります。その情報はフェッチされていないので、ticketPayload
'sは0です。渡されるデータを少なくともモックできるようにしたいのですが、ストアが優先されるため、小道具を使用することはできませんでした。
誰かが助けの光を放つか、いくつかのガイダンスを共有できることを願っています。前もって感謝します!
コンポーネントをreduxでラップするヘルパー関数を作成しました。
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import initialState from '../store/initialState';
const mockStore = (state = initialState) => configureMockStore()(state);
export const testableComponent = (component, state) =>
(<Provider store={mockStore(state)}>{component}</Provider>);
そして、あなたはそれをこのように呼ぶことができ、あなたの状態を渡します
testableComponent(<YourComponent />, {yourUpdatedMockedState})
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加