t3-env issues with Vitest test cases

niels · 2023-05-26T06:34:30.824Z

It looks like client environments are not being read. No issues with the server envs.

N

nielsOP•5/26/23, 6:35 AM

It is certainly not empty in my .env

J

julius•5/26/23, 6:38 AM

Need more than that screenshot to help you…

N

nielsOP•5/26/23, 6:39 AM

import { createEnv } from '@t3-oss/env-nextjs';
import { z } from 'zod';

export const env = createEnv({
    server: {
        NEXTAUTH_SECRET: z.string().min(1),
        NEXTAUTH_URL: z.string().url(),
    },
    client: {
        NEXT_PUBLIC_API_URL: z.string().url(),
    },
    runtimeEnv: {
        // server
        NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
        NEXTAUTH_URL: process.env.NEXTAUTH_URL,

        // client
        NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
    },
});

import { createEnv } from '@t3-oss/env-nextjs';
import { z } from 'zod';

export const env = createEnv({
    server: {
        NEXTAUTH_SECRET: z.string().min(1),
        NEXTAUTH_URL: z.string().url(),
    },
    client: {
        NEXT_PUBLIC_API_URL: z.string().url(),
    },
    runtimeEnv: {
        // server
        NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
        NEXTAUTH_URL: process.env.NEXTAUTH_URL,

        // client
        NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
    },
});

import { createEnv } from '@t3-oss/env-nextjs';
import { z } from 'zod';

export const env = createEnv({
    server: {
        NEXTAUTH_SECRET: z.string().min(1),
        NEXTAUTH_URL: z.string().url(),
    },
    client: {
        NEXT_PUBLIC_API_URL: z.string().url(),
    },
    runtimeEnv: {
        // server
        NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
        NEXTAUTH_URL: process.env.NEXTAUTH_URL,

        // client
        NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
    },
});

import { createEnv } from '@t3-oss/env-nextjs';
import { z } from 'zod';

export const env = createEnv({
    server: {
        NEXTAUTH_SECRET: z.string().min(1),
        NEXTAUTH_URL: z.string().url(),
    },
    client: {
        NEXT_PUBLIC_API_URL: z.string().url(),
    },
    runtimeEnv: {
        // server
        NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
        NEXTAUTH_URL: process.env.NEXTAUTH_URL,

        // client
        NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
    },
});

my

env.mjs

env.mjs

N

nielsOP•5/26/23, 6:39 AM

import crypto from 'crypto';
import { describe, expect, it } from 'vitest';
import { z } from 'zod';
import { AuthResponseSchema } from '../auth';

describe('AuthResponseSchema', () => {
    it('valid data passes', () => {
        const data = {
            id: crypto.randomUUID(),
            token: 'validtoken',
        };

        expect(AuthResponseSchema.parse(data)).toEqual(data);
    });
    
    it('invalid data throws error', () => {
        const data = {
            id: 'invaliduuid',
            token: '',
        };
        expect(() => AuthResponseSchema.parse(data)).toThrowError(z.ZodError);
    });
});

import crypto from 'crypto';
import { describe, expect, it } from 'vitest';
import { z } from 'zod';
import { AuthResponseSchema } from '../auth';

describe('AuthResponseSchema', () => {
    it('valid data passes', () => {
        const data = {
            id: crypto.randomUUID(),
            token: 'validtoken',
        };

        expect(AuthResponseSchema.parse(data)).toEqual(data);
    });
    
    it('invalid data throws error', () => {
        const data = {
            id: 'invaliduuid',
            token: '',
        };
        expect(() => AuthResponseSchema.parse(data)).toThrowError(z.ZodError);
    });
});

import crypto from 'crypto';
import { describe, expect, it } from 'vitest';
import { z } from 'zod';
import { AuthResponseSchema } from '../auth';

describe('AuthResponseSchema', () => {
    it('valid data passes', () => {
        const data = {
            id: crypto.randomUUID(),
            token: 'validtoken',
        };

        expect(AuthResponseSchema.parse(data)).toEqual(data);
    });
    
    it('invalid data throws error', () => {
        const data = {
            id: 'invaliduuid',
            token: '',
        };
        expect(() => AuthResponseSchema.parse(data)).toThrowError(z.ZodError);
    });
});

import crypto from 'crypto';
import { describe, expect, it } from 'vitest';
import { z } from 'zod';
import { AuthResponseSchema } from '../auth';

describe('AuthResponseSchema', () => {
    it('valid data passes', () => {
        const data = {
            id: crypto.randomUUID(),
            token: 'validtoken',
        };

        expect(AuthResponseSchema.parse(data)).toEqual(data);
    });
    
    it('invalid data throws error', () => {
        const data = {
            id: 'invaliduuid',
            token: '',
        };
        expect(() => AuthResponseSchema.parse(data)).toThrowError(z.ZodError);
    });
});

the test case

N

nielsOP•5/26/23, 6:40 AM

 ❯ onValidationError node_modules/.pnpm/@t3-oss+env-nextjs@0.3.1_typescript@5.0.4_zod@3.21.4/node_modules/@t3-oss/core/index.ts:128:13
 ❯ g node_modules/.pnpm/@t3-oss+env-nextjs@0.3.1_typescript@5.0.4_zod@3.21.4/node_modules/@t3-oss/core/index.ts:140:12
 ❯ Module.C node_modules/.pnpm/@t3-oss+env-nextjs@0.3.1_typescript@5.0.4_zod@3.21.4/node_modules/@t3-oss/env-nextjs/index.ts:28:10
 ❯ src/env.mjs:4:20
      2| import { z } from 'zod';
      3|
      4| export const env = createEnv({
       |                    ^
      5|  server: {
      6|   NEXTAUTH_SECRET: z.string().min(1),
 ❯ src/lib/api.ts:1:31

 ❯ onValidationError node_modules/.pnpm/@t3-oss+env-nextjs@0.3.1_typescript@5.0.4_zod@3.21.4/node_modules/@t3-oss/core/index.ts:128:13
 ❯ g node_modules/.pnpm/@t3-oss+env-nextjs@0.3.1_typescript@5.0.4_zod@3.21.4/node_modules/@t3-oss/core/index.ts:140:12
 ❯ Module.C node_modules/.pnpm/@t3-oss+env-nextjs@0.3.1_typescript@5.0.4_zod@3.21.4/node_modules/@t3-oss/env-nextjs/index.ts:28:10
 ❯ src/env.mjs:4:20
      2| import { z } from 'zod';
      3|
      4| export const env = createEnv({
       |                    ^
      5|  server: {
      6|   NEXTAUTH_SECRET: z.string().min(1),
 ❯ src/lib/api.ts:1:31

 ❯ onValidationError node_modules/.pnpm/@t3-oss+env-nextjs@0.3.1_typescript@5.0.4_zod@3.21.4/node_modules/@t3-oss/core/index.ts:128:13
 ❯ g node_modules/.pnpm/@t3-oss+env-nextjs@0.3.1_typescript@5.0.4_zod@3.21.4/node_modules/@t3-oss/core/index.ts:140:12
 ❯ Module.C node_modules/.pnpm/@t3-oss+env-nextjs@0.3.1_typescript@5.0.4_zod@3.21.4/node_modules/@t3-oss/env-nextjs/index.ts:28:10
 ❯ src/env.mjs:4:20
      2| import { z } from 'zod';
      3|
      4| export const env = createEnv({
       |                    ^
      5|  server: {
      6|   NEXTAUTH_SECRET: z.string().min(1),
 ❯ src/lib/api.ts:1:31

 ❯ onValidationError node_modules/.pnpm/@t3-oss+env-nextjs@0.3.1_typescript@5.0.4_zod@3.21.4/node_modules/@t3-oss/core/index.ts:128:13
 ❯ g node_modules/.pnpm/@t3-oss+env-nextjs@0.3.1_typescript@5.0.4_zod@3.21.4/node_modules/@t3-oss/core/index.ts:140:12
 ❯ Module.C node_modules/.pnpm/@t3-oss+env-nextjs@0.3.1_typescript@5.0.4_zod@3.21.4/node_modules/@t3-oss/env-nextjs/index.ts:28:10
 ❯ src/env.mjs:4:20
      2| import { z } from 'zod';
      3|
      4| export const env = createEnv({
       |                    ^
      5|  server: {
      6|   NEXTAUTH_SECRET: z.string().min(1),
 ❯ src/lib/api.ts:1:31

trace

N

nielsOP•5/26/23, 6:40 AM

import { env } from '@/env.mjs';
import axios, { type AxiosInstance } from 'axios';

/**
 * An Axios instance with its base URL set to the API URL from the Sales middleware.
 * @see https://code.notive.io/camera-tweedehands/sales-middleware-django
 *
 * @returns {AxiosInstance} An Axios instance.
 */
const api: AxiosInstance = axios.create({
    baseURL: env.NEXT_PUBLIC_API_URL,
});

export default api;

import { env } from '@/env.mjs';
import axios, { type AxiosInstance } from 'axios';

/**
 * An Axios instance with its base URL set to the API URL from the Sales middleware.
 * @see https://code.notive.io/camera-tweedehands/sales-middleware-django
 *
 * @returns {AxiosInstance} An Axios instance.
 */
const api: AxiosInstance = axios.create({
    baseURL: env.NEXT_PUBLIC_API_URL,
});

export default api;

import { env } from '@/env.mjs';
import axios, { type AxiosInstance } from 'axios';

/**
 * An Axios instance with its base URL set to the API URL from the Sales middleware.
 * @see https://code.notive.io/camera-tweedehands/sales-middleware-django
 *
 * @returns {AxiosInstance} An Axios instance.
 */
const api: AxiosInstance = axios.create({
    baseURL: env.NEXT_PUBLIC_API_URL,
});

export default api;

import { env } from '@/env.mjs';
import axios, { type AxiosInstance } from 'axios';

/**
 * An Axios instance with its base URL set to the API URL from the Sales middleware.
 * @see https://code.notive.io/camera-tweedehands/sales-middleware-django
 *
 * @returns {AxiosInstance} An Axios instance.
 */
const api: AxiosInstance = axios.create({
    baseURL: env.NEXT_PUBLIC_API_URL,
});

export default api;

api.ts

N

nielsOP•5/26/23, 6:40 AM

# Since the ".env" file is gitignored, you can use the ".env.example" file to
# build a new ".env" file when you clone the repo. Keep this file up-to-date
# when you add new variables to `.env`.

# This file will be committed to version control, so make sure not to have any
# secrets in it. If you are cloning this repo, create a copy of this file named
# ".env" and populate it with your secrets.

# When adding additional environment variables, the schema in "/src/env.mjs"
# should be updated accordingly.

# API
NEXT_PUBLIC_API_URL="http://localhost:8000/api"

# Next Auth
# You can generate a new secret on the command line with:
# openssl rand -base64 32
# https://next-auth.js.org/configuration/options#secret
NEXTAUTH_SECRET="UQzCUvyvDXxYKKVAPjuNy1D9td6G4b9XUmmqlAAzucE="
NEXTAUTH_URL="http://localhost:3000"

# Since the ".env" file is gitignored, you can use the ".env.example" file to
# build a new ".env" file when you clone the repo. Keep this file up-to-date
# when you add new variables to `.env`.

# This file will be committed to version control, so make sure not to have any
# secrets in it. If you are cloning this repo, create a copy of this file named
# ".env" and populate it with your secrets.

# When adding additional environment variables, the schema in "/src/env.mjs"
# should be updated accordingly.

# API
NEXT_PUBLIC_API_URL="http://localhost:8000/api"

# Next Auth
# You can generate a new secret on the command line with:
# openssl rand -base64 32
# https://next-auth.js.org/configuration/options#secret
NEXTAUTH_SECRET="UQzCUvyvDXxYKKVAPjuNy1D9td6G4b9XUmmqlAAzucE="
NEXTAUTH_URL="http://localhost:3000"

# Since the ".env" file is gitignored, you can use the ".env.example" file to
# build a new ".env" file when you clone the repo. Keep this file up-to-date
# when you add new variables to `.env`.

# This file will be committed to version control, so make sure not to have any
# secrets in it. If you are cloning this repo, create a copy of this file named
# ".env" and populate it with your secrets.

# When adding additional environment variables, the schema in "/src/env.mjs"
# should be updated accordingly.

# API
NEXT_PUBLIC_API_URL="http://localhost:8000/api"

# Next Auth
# You can generate a new secret on the command line with:
# openssl rand -base64 32
# https://next-auth.js.org/configuration/options#secret
NEXTAUTH_SECRET="UQzCUvyvDXxYKKVAPjuNy1D9td6G4b9XUmmqlAAzucE="
NEXTAUTH_URL="http://localhost:3000"

# Since the ".env" file is gitignored, you can use the ".env.example" file to
# build a new ".env" file when you clone the repo. Keep this file up-to-date
# when you add new variables to `.env`.

# This file will be committed to version control, so make sure not to have any
# secrets in it. If you are cloning this repo, create a copy of this file named
# ".env" and populate it with your secrets.

# When adding additional environment variables, the schema in "/src/env.mjs"
# should be updated accordingly.

# API
NEXT_PUBLIC_API_URL="http://localhost:8000/api"

# Next Auth
# You can generate a new secret on the command line with:
# openssl rand -base64 32
# https://next-auth.js.org/configuration/options#secret
NEXTAUTH_SECRET="UQzCUvyvDXxYKKVAPjuNy1D9td6G4b9XUmmqlAAzucE="
NEXTAUTH_URL="http://localhost:3000"

and the env itself

N

nielsOP•5/26/23, 6:41 AM

I'm on next 13.4.3 and @t3-oss/env-nextjs 0.3.1

N

nielsOP•5/26/23, 6:42 AM

I am unable to share the repo sadly as it is a confidential work repo

N

nielsOP•5/26/23, 6:45 AM

Also running pnpm build works fine too weirdly enough

N

nielsOP•5/26/23, 8:38 AM

Also in dev, I have access to all env values

N

nielsOP•5/26/23, 8:39 AM

Seems like the test is the only issue

N

nielsOP•5/26/23, 8:40 AM

import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from 'vitest/config';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [tsconfigPaths(), react()],
    test: {
        environment: 'jsdom',
    },
});

import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from 'vitest/config';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [tsconfigPaths(), react()],
    test: {
        environment: 'jsdom',
    },
});

import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from 'vitest/config';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [tsconfigPaths(), react()],
    test: {
        environment: 'jsdom',
    },
});

import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from 'vitest/config';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [tsconfigPaths(), react()],
    test: {
        environment: 'jsdom',
    },
});

maybe my config is wrong

N

nielsOP•5/26/23, 8:51 AM

With the environment set to node, it doesnt see any envs

❌ Invalid environment variables: {
  NEXTAUTH_SECRET: [ 'Required' ],
  NEXTAUTH_URL: [ 'Required' ],
  NEXT_PUBLIC_API_URL: [ 'Required' ]
}

❌ Invalid environment variables: {
  NEXTAUTH_SECRET: [ 'Required' ],
  NEXTAUTH_URL: [ 'Required' ],
  NEXT_PUBLIC_API_URL: [ 'Required' ]
}

❌ Invalid environment variables: {
  NEXTAUTH_SECRET: [ 'Required' ],
  NEXTAUTH_URL: [ 'Required' ],
  NEXT_PUBLIC_API_URL: [ 'Required' ]
}

❌ Invalid environment variables: {
  NEXTAUTH_SECRET: [ 'Required' ],
  NEXTAUTH_URL: [ 'Required' ],
  NEXT_PUBLIC_API_URL: [ 'Required' ]
}

whereas with jsdom only the NEXT_PUBLIC_API_URL is invalid

F

Finn•5/26/23, 9:04 AM

You have to turn of env validation if your not Gona give the env vars

Nniels ```mjs import { createEnv } from '@t3-oss/env-nextjs'; import { z } from 'zod'; ...

F

Finn•5/26/23, 9:05 AM

Create env takes a option for that

N

nielsOP•5/26/23, 9:05 AM

but the env vars are in my .env

Nniels ``` # Since the ".env" file is gitignored, you can use the ".env.example" file t...

N

nielsOP•5/26/23, 9:05 AM

here

N

nielsOP•5/26/23, 9:06 AM

so im not sure why

pnpm test

pnpm test

doesnt see that

F

Finn•5/26/23, 9:06 AM

  skipValidation: !!process.env.SKIP_ENV_VALIDATION,

  skipValidation: !!process.env.SKIP_ENV_VALIDATION,

Oh true. But I guess you won't always have them when you run your tests

F

Finn•5/26/23, 9:08 AM

You could make it somthing like

skipValidation: !!process.env.SKIP_ENV_VALIDATION || !!import.meta.vitetest

skipValidation: !!process.env.SKIP_ENV_VALIDATION || !!import.meta.vitetest

N

nielsOP•5/26/23, 9:08 AM

whats || !!import.meta.vitetest

F

Finn•5/26/23, 9:08 AM

Skips validation when it's run via vitest

F

Finn•5/26/23, 9:08 AM

Or atleast I'm hoping

N

nielsOP•5/26/23, 9:14 AM

im not sure if thats the right approach

N

nielsOP•5/26/23, 9:14 AM

cause

N

nielsOP•5/26/23, 9:14 AM

the env is still empty

N

nielsOP•5/26/23, 9:14 AM

{
NEXTAUTH_SECRET: undefined,
NEXTAUTH_URL: undefined,
NEXT_PUBLIC_API_URL: undefined
}

N

nielsOP•5/26/23, 9:14 AM

this is when i log the full env in some test

F

Finn•5/26/23, 9:17 AM

Ahhh yeah it won't be then

N

nielsOP•5/26/23, 9:33 AM

Hope Julius has any ideas

F

Finn•5/26/23, 9:37 AM

Have you got a minimal repro?

N

nielsOP•5/26/23, 9:38 AM

What do you mean?

F

Finn•5/26/23, 9:43 AM

A repo that contains just the code needed to reproduce the issue

N

nielsOP•5/26/23, 9:45 AM

I dont have the time to set that up right now, im at work haha

N

nielsOP•5/26/23, 9:45 AM

does it have to do with the VITE_ prefix maybe

N

nielsOP•5/26/23, 9:52 AM

looks like it....

N

nielsOP•5/26/23, 9:52 AM

{
  NEXTAUTH_SECRET: undefined,
  NEXTAUTH_URL: undefined,
  NEXT_PUBLIC_API_URL: undefined,
  VITE_TEST_ENV: 'test'
}

{
  NEXTAUTH_SECRET: undefined,
  NEXTAUTH_URL: undefined,
  NEXT_PUBLIC_API_URL: undefined,
  VITE_TEST_ENV: 'test'
}

{
  NEXTAUTH_SECRET: undefined,
  NEXTAUTH_URL: undefined,
  NEXT_PUBLIC_API_URL: undefined,
  VITE_TEST_ENV: 'test'
}

{
  NEXTAUTH_SECRET: undefined,
  NEXTAUTH_URL: undefined,
  NEXT_PUBLIC_API_URL: undefined,
  VITE_TEST_ENV: 'test'
}

N

nielsOP•5/26/23, 9:52 AM

damn thats inconvenient

Nniels I dont have the time to set that up right now, im at work haha

F

Finn•5/26/23, 10:08 AM

Fairs

Nniels ``` { NEXTAUTH_SECRET: undefined, NEXTAUTH_URL: undefined, NEXT_PUBLIC_API...

F

Finn•5/26/23, 10:08 AM

Hmmm is there anything in Thier docs about env vars?

N

nielsOP•5/26/23, 10:16 AM

not really i believe

N

nielsOP•5/26/23, 10:16 AM

might have to add dotenv package

F

Finn•5/26/23, 10:20 AM

Oh yeah

. Your using next. Should have seen that sooner

N

nielsOP•5/26/23, 11:24 AM

there's gotta be some workaround for this no?

@marminge have you come across this issue whilst building the

t3-complete

t3-complete

repo that also uses Vitest?

F

Finn•5/26/23, 11:45 AM

Don't think complete does unit testing

F

Finn•5/26/23, 11:46 AM

Can you call dotenv from your vite config? That might work

FFinn Don't think complete does unit testing

N

nielsOP•5/26/23, 11:49 AM

It does with Vitest and Playwright

FFinn Can you call dotenv from your vite config? That might work

N

nielsOP•5/26/23, 11:49 AM

not sure how dotenv works, gotta figure that out

t3-env issues with Vitest test cases

Similar Threads

Similar Threads

Similar Threads