You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi, thanks for this library! It was so easy and fast to implement exactly what I needed! 馃檶
Just wanted to share how I've started testing my implementations with React Testing Library:
First, create a custom render function that includes the theme provider with an optional value:
Third: Test that the toggle actually changes the theme. Of course the exact implementation here will differ depending on how you write your toggle.
(technically you could assert the select value when you control it directly from the hook value, but I figured using a spy would be a bit more robust)
// components/ThemeToggle.test.tsximportReactfrom'react';import{useTheme}from'next-themes';import{render,fireEvent}from'../test/test-utils';importThemeTogglefrom'./ThemeToggle';constThemeSpy: React.FC=()=>{const{ theme }=useTheme();return<spandata-testid="theme-spy">{theme}</span>;};it('toggles the theme',async()=>{const{ getByTestId }=render(<><ThemeToggle/><ThemeSpy/></>,{theme: 'dark'},// Is also the default value, explicitly adding it here makes the test a bit more easy to read);constselect=getByTestId('theme-select');constspy=getByTestId('theme-spy');fireEvent.change(select,{target: {value: 'light'}});expect(spy).toHaveTextContent('light');});
Let me know if you see anything that could be improved of course!
I think it would be nice to add this as an example for the next person. :)
The text was updated successfully, but these errors were encountered:
Thanks for this! It was very helpful. I figured I would contribute additional points for how to integrate this with testing.
Perhaps since this issue was made, the repo changed, but when this solution is ran as is with the current code, jest will complain that matchMedia isn't a function and needs to be mocked.
The solution can actually be stolen from this repo lol. All one needs to do is add the following code to your setup file or test file as needed to mock out everything this library needs mocked:
letlocalStorageMock: {[key: string]: string}={}beforeAll(()=>{// Create a mock of the window.matchMedia functionglobal.matchMedia=jest.fn(query=>({matches: false,media: query,onchange: null,addListener: jest.fn(),removeListener: jest.fn(),addEventListener: jest.fn(),removeEventListener: jest.fn(),dispatchEvent: jest.fn()}))// Create mocks of localStorage getItem and setItem functionsglobal.Storage.prototype.getItem=jest.fn((key: string)=>localStorageMock[key])global.Storage.prototype.setItem=jest.fn((key: string,value: string)=>{localStorageMock[key]=value})})beforeEach(()=>{// Clear the localStorage-mocklocalStorageMock={}})
If you set resetMocks: true in your jest config like I do (ref to the docs for resetMocks), then you will need all of this in a before each since the mocks get wiped before each test
Hi, thanks for this library! It was so easy and fast to implement exactly what I needed! 馃檶
Just wanted to share how I've started testing my implementations with React Testing Library:
First, create a custom render function that includes the theme provider with an optional value:
Second: Add a test-id to select your select (馃榿):
Third: Test that the toggle actually changes the theme. Of course the exact implementation here will differ depending on how you write your toggle.
(technically you could assert the select value when you control it directly from the hook value, but I figured using a spy would be a bit more robust)
Let me know if you see anything that could be improved of course!
I think it would be nice to add this as an example for the next person. :)
The text was updated successfully, but these errors were encountered: