CODEWITHSUNDEEP
javascriptreactjstypescriptjestjs
Simon Tran
Simon Tran

Reputation: 2100

How can I provide a useState to a context in jest?




export const Comp = () => {
  const {val, change} = useContext(ProviderContext)

  return (
    <TextField>
      onChange={({target}) => {
      change(target)
    }}
      value={val}
    </TextField>
  );
}


describe('test', ()=>{
  let container = document.createElement('div')
  document.body.appendChild(container);

  //This doesn't work since it's not a react component

  const [val, setVal] = useState();

  const change = (e)=>{
    setVal(e.value)
  }

  it('test', ()=>{
    act(() => {
      render(
        <ProviderContext.Provider value={{
          val,
          change,
        }}>
          <Comp />
        </ProviderContext.Provider>
      ), container
    });
  })

})

When the users inputs text in the field, it calls the TextField's onChange, which calls the "change" function from the context, which updates the 'val' state from the context.

thank you

Upvotes: 0

Views: 924

Answers (1)

Greg Motyl
Greg Motyl

Reputation: 2555

You can use renderHook from react testing library

import { renderHook, act } from '@testing-library/react-hooks'

it('test', ()=>{

  const [val, setVal] = renderHook(() => useState());

  act(() => {
    render(
      <ProviderContext.Provider value={{
        val,
      }}>
        <Comp />
        </ProviderContext.Provider>
    ), container
  });
})

Upvotes: 2

Related Questions